layui图片懒加载-loading占位图

2018-12-14 08:37:36来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

前言

    使用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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:撩课-Web大前端每天5道面试题-Day8

下一篇:前端解析zip文件