html怎么帮图片占位,css 技巧：利用 after 伪对象和 background 属性实现 img 图片标签占位图...

如图：

图片加载失败了，在浏览器会默认显示一张破图。受各种网速、浏览器等因素影响，我们无法保证图片能够完全加载成功。加载失败时如何更友好的显示是前端要考虑的主要因素。

常见做法都是使用一张默认图代替加载失败的图片，比如一个 logo 、一张主题图片等。

做法一

使用 JS 懒加载图片，如果图片加载失败，使用一个默认图占位。

该插件使用 setTimeout 监听页面元素是否显示，如果图片出现在显示区域则执行图片加载。适应常见的 tab 切换，轮播图等。

注意：图片懒加载也是一种页面优化手段，该方案适用于一开始项目立项就有考虑懒加载情况。

做法二

使用 img 伪类 after 和 background 实现占位图。

该方案适用于一些未考虑图片懒加载的项目优化。

比如：页面上某个模块存在很古老，如果去改 html 结构有风险，这时候可以使用 css background 和伪类 after 用占位图去优化显示。

注意：该方案仅适用于 webkit 内核浏览器，对于采用渐进增强的网页比较实用。比如： chrome浏览器，移动端浏览器等。桌面浏览器比如 Firefox、IE 等都不支持 img:after 写法。

效果：

源码：

}.placeholder:after{content:'';position:absolute;width:100%;height:100%;left:0;top:0;background:url('img.png') no-repeat center #999;z-index:3;

}

做法三

直接使用 img background 属性实现占位图。

这种方式有个弊端是图片加载失败时，破图还是显示在页面上，不能挡住。

该方案好处是兼容性强，各种浏览器都支持 img background 写法。

效果：

}

总结

img 标签经常用于加载图片，background 属性及 after 伪对象使用比较少。其实 css 比我们想象中的更强大。

以上使用 css 优化方案需要考虑 png 透明背景情况，如果 png 透明，可能会导致占位图与需要显示的图片重叠。