layui flow loading佔位圖實現方法

時間 2019-11-06

標籤 layui flow loading 佔位實現方法简体版

原文原文鏈接

若是流圖片要加載失敗, 就會顯示找不到圖片的裂痕javascript

代碼以下: css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css" 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>

圖片目錄: html

修改方法 :java

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")jquery

修改完成後效果: ui

注意: spa

相關標籤/搜索