今天用css写了个图片连续横向滚动,完成效果如下:
如果你的网站是个图片站,首页显示了很多图片。那么你就会有图片多了导致加载比较慢的困扰。这个时候有几个方案解决。
1、物理解决方案:加大网站的带宽+压缩图片大小;
2、用图片懒加载js,图片没加载出来之前先加载个缓冲图片占位;
3、也就是本文讨论的,用css来加一个占位图;
首先想到的就是给图片外层加一个盒子包裹住,然后给这个盒子设置一个背景图。
然后在测试过程中发现,这个方案不起效果,图片没加载出来的时候这个盒子的背景图并不会及时显示出来,往往等图片快加载出来的才会一现而逝。
通过查询资料得知,浏览器渲染dom的时候是先加载html里面的图片,再加载css里面的背景图片的。所以这个方案才不会有改有的效果…
换另外一种方案:
在外层盒子的伪类“after
”里面动脑筋,给外层盒子设置个“position: relative;
”,然后设置给伪类设置“position:absolute;
”宽度高度都为100%;加个背景色,再加上提示文字“content:
“加载中”;”,出来的效果图下:
这个操作除了没有动画外,基本上该有的作用都有了。
© 版权声明
本网站名称:玩转网
本站永久网址:https://www.902d.com
版权声明:知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可
转载时请以超链接形式标明文章原始出处和作者信息,谢谢合作。
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长977260006@qq.com进行删除处理。
THE END