提供zblog模板_zblog主题_wordpress模板的下载和定制

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

天兴工作室 2020-04-10 网页特效 1029 0 评论


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

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

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

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


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

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

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


换另外一种方案:

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

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

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


没有找到解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

取消回复欢迎 发表评论:

  • 请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合

社交账号登录

将本文分享给你的朋友们