如何防止在头部从服务器加载我的真实图像时出现损坏的图像答案

【问题标题】：How to prevent broken image appearing while loading my real image from server in head如何防止在头部从服务器加载我的真实图像时出现损坏的图像
【发布时间】：2018-03-05 05:49:27
【问题描述】：

我正在开发一个包含 HTML、CSS 和 JavaScript 的应用程序前端，一切都很好，但是在图像加载到标题中之前，损坏的图像图标首先出现。

我想添加背景颜色来代替损坏的图像，直到原始图像完全加载。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

在内容完全加载后显示<img>。

<img style='display: none' onload="this.style.display = 'block'" src="...">

如果你使用的是 jQuery

<img style='display: none' id="myImg" onload="$(myImg).show()" src="...">

【讨论】：

【解决方案2】：

如果最初呈现页面时未加载图像，则 img 标签将显示图标。如果您正在使用任何 JS，那么您可以这样做

将图像标签置于条件中，仅当图像在后台加载时显示（异步调用）。 2 直到图片没有加载，隐藏图片标签，使用标签或任何其他带有背景颜色的标签。

【讨论】：

我试过但没用，有没有办法用 css 解决这个问题？

【解决方案3】：

另一种方法：使用内联 svg img 占位符，使用 ajax 请求真实的 img 然后替换占位符。

内联图片

<img alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

【讨论】：

【解决方案4】：

1) 使用 css 的解决方案是 alt=""。

2) 借助 java 脚本

将此代码放在图片标签中

在图像完全加载之前，通过将 img 放在后台会克服错误

【讨论】：