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