欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

织梦模板

当前位置:织梦模板 > 技术文档 > 程序代码 > html图片和css背景图片哪个先开始加载?css占位图怎么操作?
这篇文章主要为大家详细介绍了html图片和css背景图片哪个先开始加载?css占位图怎么操作?,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

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

html图片和css背景图片哪个先开始加载?css占位图怎么操作? css背景图 懒加载 css占位图 网页特效 第1张

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

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

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

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

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

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

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

换另外一种方案:

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

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

以上就是html图片和css背景图片哪个先开始加载?css占位图怎么操作?的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css HTML 背景图片

上一篇html中input的边框如何去掉

下一篇mysql 日期增加/减少一年 一月 一天的方法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在