使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好。找了一些解决方法我统一记录一下。
layui图片懒加载使用方法
layui.use(’flow’, function(){
var flow = layui.flow;
//当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
flow.lazyimg();
});
loading占位图实现方法
img标签src为loading占位图的地址,lay-src为正图地址,图片懒加载时会替换src
修改js
lay/modules/flow.js 检索 &&!e.attr("src")
有三种修改方法
1.删除&&!e.attr("src")
2.改为&&e.attr("lay-src")
3.改为&&!e.attr("lay-src")
我这里用的第二种 其他的我也试了可以实现,你们自行测试
提供几个loading.gif