码迷,mamicode.com
首页 > 其他好文 > 详细

layui flow loading占位图实现方法

时间:2019-08-18 11:48:15      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:body   显示   cti   mic   meta   col   bbb   tle   alt   

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

技术图片

代码如下: 

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

技术图片

 

 修改完成后效果: 

技术图片

 

 注意:  技术图片

 

layui flow loading占位图实现方法

标签:body   显示   cti   mic   meta   col   bbb   tle   alt   

原文地址:https://www.cnblogs.com/yysbolg/p/11371529.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!