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

今天用css写了个图片连续横向滚动，完成效果如下：

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

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

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

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

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

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

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

换另外一种方案：

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

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