關于layui flow loading占位圖的實現方法
更新時間：2019年09月21日 09:33:35 作者：```...簡單點
今天小編就為大家分享一篇關于layui flow loading占位圖的實現方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如果流圖片要加載失敗, 就會顯示找不到圖片的裂痕
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" media="all">
</head>
<body>
<img lay-src="loadingImg/aaa.jpg">
<img src="loadingImg/bbb.jpg" alt="該圖片不會加載">
<!--ddd.jpg 圖片不存在-->
<img src="loadingImg/ddd.jpg">
<img src="loadingImg/loading.gif" lay-src="ddd.jpg">
<img src="loadingImg/loading.gif" lay-src="loadingImg/aaa.jpg">
<script src="layui/layui.js"></script>
<script type="text/javascript">
var $;
layui.use(['flow', 'jquery'], function () {
var flow = layui.flow;
$ = layui.jquery;
flow.lazyimg();
});
</script>
</body>
</html>
圖片目錄：
修改方法：
img標簽src為loading占位圖的地址，lay-src為正圖地址，圖片懶加載時會替換src
<img src="loadingImg/loading.gif" lay-src="ddd.jpg">
修改js
lay/modules/flow.js 檢索 &&!e.attr("src")
有三種修改方法
1.刪除&&!e.attr("src")
2.改為&&e.attr("lay-src")
3.改為&&!e.attr("lay-src")
修改完成后效果：
注意： 
以上這篇關于layui flow loading占位圖的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS實現元素的拖動與占位功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
本文通過實例代碼給大家介紹了el-input 標簽中密碼的顯示和隱藏 ,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了微信小程序實現井字棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
js實現的鼠標滾輪滾動切換頁面效果(類似360默認頁面滾動切換效果)
這篇文章主要介紹了js實現的鼠標滾輪滾動切換頁面效果,類似360默認頁面滾動切換效果.涉及JavaScript響應鼠標事件動態(tài)變換頁面元素的相關技巧,需要的朋友可以參考下2016-01-01
這篇文章給大家介紹js組件系列之Bootstrap Icon圖標選擇組件，對bootstrap icon圖標相關知識感興趣的朋友一起學習吧2016-01-01
閉包的一個通常的用法是為一個在某一函數執(zhí)行前先執(zhí)行的函數提供參數。例如，在web環(huán)境中，一個函數作為setTimeout函數調用的第一個參數，是一種很常見的應用2017-04-04
element select下拉框編輯時回顯已經刪除的數據操作代碼
今天做項目遇到一個棘手的問題,關于element select下拉框編輯時回顯問題,下面小編通過實例代碼介紹element select下拉框編輯時回顯已經刪除的數據,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了JS實現中國公民身份證號碼有效性驗證,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了微信小程序提取公用函數到util.js及使用方法,結合實例形式分析了util.js公用函數相關調用操作技巧,需要的朋友可以參考下2019-01-01
本篇文章只要是對JS判斷兩個時間大小的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01