layui圖片懶載入-loading佔點陣圖

粉紅頑皮蛇發表於2018-12-14
UI

前言

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

相關文章