LayUI 懒加载添加图片loading 占位图

2019-08-04 11:46:20      0

使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好。找了一些解决方法我统一记录一下。


首先:layui图片懒加载使用方法

layui.use('flow', function(){
    var flow = layui.flow;
    //当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
    flow.lazyimg(); 
});
<img lay-src="aaa.jpg"> 
<img src="bbb.jpg" alt="该图不会懒加载">
<img lay-src="ccc.jpg">


loading占位图实现方法

img标签src为loading占位图的地址,lay-src为正图地址,图片懒加载时会替换src

<img src="loading.gif" lay-src="img.jpg">

修改 lay/modules/flow.js  检索 

&&!e.attr("src")

有三种修改方法

1、删除&&!e.attr("src")

2、改为&&e.attr("lay-src")

3、改为&&!e.attr("lay-src")


我这里用的第二种 其他的我也试了可以实现,你们自行测试



    本文地址:https://www.cs27.com/show-47-136-1.html

    如转载请标注来自《艾奇站长网》。