如果你的网站是个图片站,首页显示了很多图片。那么你就会有图片多了导致加载比较慢的困扰。这个时候有几个方案解决。
1、物理解决方案:加大网站的带宽+压缩图片大小;
2、用图片懒加载js,图片没加载出来之前先加载个缓冲图片占位;
3、也就是本文讨论的,用css来加一个占位图;
首先想到的就是给图片外层加一个盒子包裹住,然后给这个盒子设置一个背景图。
然后在测试过程中发现,这个方案不起效果,图片没加载出来的时候这个盒子的背景图并不会及时显示出来,往往等图片快加载出来的才会一现而逝。
通过查询资料得知,浏览器渲染dom的时候是先加载html里面的图片,再加载css里面的背景图片的。所以这个方案才不会有改有的效果...
换另外一种方案:
在外层盒子的伪类“after”里面动脑筋,给外层盒子设置个“position: relative;”,然后设置给伪类设置“position:absolute;”宽度高度都为100%;加个背景色,再加上提示文字“content:"加载中";”,出来的效果图下:
这个操作除了没有动画外,基本上该有的作用都有了。
相关推荐
- 记录瀑布流+下拉无限加载+lightbox页面踩的坑05-20
- swiper做导航栏时自动跳转至对应分类的代码12-07
- css实现的图片连续横向滚动效果07-31
- html图片和css背景图片哪个先开始加载?css占位图怎么操作?04-10
- css写三角形的原理和使用方法11-30
- 一个输入框调用多个搜索引擎的js代码08-17
- 一个纯html+css的下拉导航动画效果01-24
- JQ特效之:页面向上滚动时弹出模块06-09
- 比较简单易懂的跟随滚动侧栏模块 JQ+html+css03-25
- 一个页面可多处重复使用的简单tab标签jQuery代码01-11
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 2vue3项目引入vant报错的错误原因和解决办法03-12
- 3天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 4zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 5天兴工作室2023双11活动:五折优惠券大放送11-05
- 6腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 7新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 8天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 9[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 标签聚合
- ×1自定义模块×1模板下载×1标题×1txt文本×1emlog免费cms模板×1浏览器兼容×2zblog案例×1程序×1bootstrap框架×1卢松松新版×1旅游模板×2简洁模板×1自分类×1保健品×1zblog调用标签×1idc×1评论无限嵌套×1手机端视频播放×1六一儿童节×2dedecms安装主题
最新评论
-
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求 -
访客
01-16点击分类,能不能下面显示所有分类的名字。 -
天兴工作室
01-13多条件筛选很麻烦,主题不考虑加,有需求可以联系我定制