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