layui flow loading占位图实现方法

2019-08-26 05:41:14来源:博客园 阅读 ()

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

layui flow loading占位图实现方法

 如果流图片要加载失败, 就会显示找不到图片的裂痕

代码如下: 

<!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>

 

图片目录: 

修改方法 :

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

 

 修改完成后效果: 

 

 注意:  

 


原文链接:https://www.cnblogs.com/yysbolg/p/11371529.html
如有疑问请与原作者联系

标签:

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

上一篇:一个初初初初级前端开发工程师突如其来的热血沸腾。

下一篇:CSS缩写图例的总结