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

代码如下:

<!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占位图实现方法的更多相关文章

  1. layui图片懒加载-loading占位图

    前言 使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好.找了一些解决方法我统一记录一下. layui图片懒加载使用方法 layui.use(’flow’ ...

  2. iOS开发造轮子 | 通用占位图

    https://www.jianshu.com/p/beca3ac24031 实际运用场景: 没网时的提示view,tableView或collectionView没内容时的展示view,以及其它特殊 ...

  3. [RN] React Native Image 实现placeholder占位图

    React Native Image 实现placeholder占位图 react-native Image没有placeholder这样的props,但是业务有需要这种场景, 解决方法为: 使用Im ...

  4. Skeleton Screen加载占位图(内容出现前显示灰色占位图)的分析与实现

    今天有几个好友问了这个叫加载占位图的实现方法,我还在此问题下做了个回答.由于国内对这个的名词是各有各的叫法,所以这里直接用加载占位图来解释.相信很多人都看到过图中这样的加载方式: 这个图是一个国内知名 ...

  5. 零行代码为App添加异常加载占位图

    前文提要 近期准备重构项目,需要重写一些通用模块,正巧需要设置App异常加载占位图的问题,心血来潮设想是否可以零行代码解决此问题,特在此分享实现思路. 思路分享 对于App占位图,通常需要考虑的控件有 ...

  6. iOS开发——无网占位图的实现

    https://www.jianshu.com/p/d537393fe247 https://github.com/wyzxc/CQPlaceholderViewhttps://github.com/ ...

  7. [iOS]一行代码集成空白页面占位图(基于runtime+MJRefresh思想)

    2018年01月03日阅读 2472   [iOS]一行代码集成空白页面占位图(基于runtime+MJRefresh思想) LYEmptyView 此框架是本人在5,6个月前,公司启动新项目的时候, ...

  8. 零行代码为 App 添加异常加载占位图

    前文提要 近期准备重构项目,需要重写一些通用模块,正巧需要设置App异常加载占位图的问题,心血来潮设想是否可以零行代码解决此问题,特在此分享实现思路. 思路分享 对于App占位图,通常需要考虑的控件有 ...

  9. [问题解决]Fresco设置占位图不显示的问题

    [问题解决]Fresco设置占位图不显示的问题 /** * Created by diql on 2017/02/15. */ 问题说明 本来设置占位图是通过以下方法: public void set ...

随机推荐

  1. linux设备驱动程序--bus

    linux 中bus驱动解析 总线(bus)是linux发展过程中抽象出来的一种设备模型,为了统一管理所有的设备,内核中每个设备都会被挂载在总线上,这个bus可以是对应硬件的bus(i2c bus.s ...

  2. 使用java spring开发ckeditor的文件上传功能（转）

    说明:原帖提供的代码无法直接运行.本人在原帖基础上做了一些修改,修复了一些bug. 关于CKEditor的使用,网络上有无数的文章,这里不再赘述.而关于java支持的文件上传功能,网络上同样有千千万万 ...

  3. discuz添加标签聚合页

    discuz使用视频教程前段时间把discuz原本的标签聚合页修改了一下,原本的标签聚合页只显示100条最新的标签,把它修改成了所有标签都显示,并加上分页. 修改方法: 1.修改/source/mod ...

  4. Spring Boot 之：接口参数校验

    Spring Boot 之:接口参数校验,学习资料 网址 SpringBoot(八) JSR-303 数据验证(写的比较好) https://qq343509740.gitee.io/2018/07/ ...

  5. 20180516模拟赛T2——string

    题解 对于一个字符串A,我们只能把其首字符取出,故如果我们想让A串与B串相等,能重复利用的部分只能是A串结尾与B串开头相等的部分.对于取出的字符,我们可以把'o'放在一个容器中,把'x'放在另一个容器 ...

  6. 记CSP2019

    给出题人倒杯茶好吧,出题人给你倒一杯卡布奇诺.给出题人倒一杯卡布奇诺! 开始你的炫技秀,搞CCF.漂亮! 六道题你能秒我?你能秒杀我?!你今天能六道题把李某秒了,我!当!场!就把这个电脑屏幕吃掉!! ...

  7. 【Hadoop】新建hadoop用户以及用户组，给予sudo权限(转）

    1.首先新建用户,adduser命令 sudo adduser hadoop passwd hadoop 输入密码之后,一路 y 确定. 2.添加用户组 在创建hadoop用户的同时也创建了hadoo ...

  8. es6 Object 数据属性和访问器属性

    原文 :http://www.jb51.net/article/91698.htm 总结 ES5提供了Object.getOwnPropertyDescripter()方法来获取给定属性的描述符. p ...

  9. 命令行创建react.js项目

    npm install -g create-react-app  /*搭建一个全局的脚手架*/ create-react-app my-demo        /*创建项目 my-demo是项目名字* ...

  10. C++编译器与链接器工作原理

    http://blog.csdn.net/success041000/article/details/6714195 1. 几个概念 1)编译:把源文件中的源代码翻译成机器语言,保存到目标文件中.如果 ...