html图片和css背景图片哪个先开始加载?css占位图怎么操作?

有关于html图片和css背景图片哪个先开始加载?css占位图怎么操作?的详细介绍,下边就和航海之王小编一起来看一下有关于html图片和css背景图片哪个先开始加载?css占位图怎么操作?的经验吧

如果你的网站是个图片站,首页显示了很多图片。那么你就会有图片多了导致加载比较慢的困扰。这个时候有几个方案解决。

1、物理解决方案:加大网站的带宽+压缩图片大小;

html图片和css背景图片哪个先开始加载?css占位图怎么操作?
(航海之王资源攻略,转载备注航海之王:www.hhzw.com)

2、用图片懒加载js,图片没加载出来之前先加载个缓冲图片占位;

3、也就是本文讨论的,用css来加一个占位图;


首先想到的就是给图片外层加一个盒子包裹住,然后给这个盒子设置一个背景图。

然后在测试过程中发现,这个方案不起效果,图片没加载出来的时候这个盒子的背景图并不会及时显示出来,往往等图片快加载出来的才会一现而逝。

html图片和css背景图片哪个先开始加载?css占位图怎么操作?
(航海之王资源攻略,转载备注航海之王:www.hhzw.com)

通过查询资料得知,浏览器渲染dom的时候是先加载html里面的图片,再加载css里面的背景图片的。所以这个方案才不会有改有的效果...


换另外一种方案:

在外层盒子的伪类“after”里面动脑筋,给外层盒子设置个“position: relative;”,然后设置给伪类设置“position:absolute;”宽度高度都为100%;加个背景色,再加上提示文字“content:"加载中";”,出来的效果图下:

html图片和css背景图片哪个先开始加载?css占位图怎么操作?
(航海之王资源攻略,转载备注航海之王:www.hhzw.com)

这个操作除了没有动画外,基本上该有的作用都有了。


免责声明:本文来自天兴工作室,不代表本站的观点和立场,如有侵权请联系本平台处理。
航海之王 » html图片和css背景图片哪个先开始加载?css占位图怎么操作?

发表评论

欢迎 访客 发表评论

www.hhzw.com 航海之王全能发布网

查看演示 官网购买
欢迎你第一次访问网站!