layui图片懒加载-loading占位图
Posted wanpishe
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui图片懒加载-loading占位图相关的知识,希望对你有一定的参考价值。
前言
使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好。找了一些解决方法我统一记录一下。
layui图片懒加载使用方法
1 layui.use(’flow’, function(){ 2 var flow = layui.flow; 3 //当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img) 4 flow.lazyimg(); 5 }); 6 <img lay-src="aaa.jpg"> 7 <img src="bbb.jpg" alt="該图不会懒加载"> 8 <img lay-src="ccc.jpg">
loading占位图实现方法
img标签src为loading占位图的地址,lay-src为正图地址,图片懒加载时会替换src
<img src="loading.gif" lay-src="img.jpg">
修改js
lay/modules/flow.js 检索 &&!e.attr("src")
有三种修改方法
1.删除&&!e.attr("src")
2.改为&&e.attr("lay-src")
3.改为&&!e.attr("lay-src")
我这里用的第二种 其他的我也试了可以实现,你们自行测试
提供几个loading.gif
原文章地址:
https://www.wanpishe.top/detail?blogId=fc9209e6-6c90-4eac-9019-e64c643cc988
以上是关于layui图片懒加载-loading占位图的主要内容,如果未能解决你的问题,请参考以下文章