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

代码如下:

<!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. 【Mysql】Mysql root用户误删了或只剩下没有任何操作权限的用户怎么办

     一.操作步骤 1.停止mysql服务:在mysql安装目录下找到mysqld.cnf:在mysqld.cnf中找到以下片段[mysqld]:另起一行加入代码:skip-grant-tables 并保 ...

  2. manager.add_command('runserver', Server('0.0.0.0', port='8093', extra_files=extra_files))

    extra_files: a list of files the reloader should watch                    additionally to the module ...

  3. 终于有人把Elasticsearch原理讲透了！

    终于有人把Elasticsearch原理讲透了! http://developer.51cto.com/art/201904/594615.htm 小史是一个非科班的程序员,虽然学的是电子专业,但是通 ...

  4. 黄金矿工（LeetCode Medium难度）1129题 题解（DFS）

    题目描述: 给定一个二维网络,给定任意起点与终点.每一步可以往4个方向走.要找出黄金最多的一条线路. 很明显的是要“一条路走到黑,一直下去直到某个条件停止”. 运用dfs(深度优先搜索)求解. 因为起 ...

  5. php调停者模式(mediator pattern)

    差不多了,睡一觉,下次再弄. <?php /* The more classes we have in our software, the more complex their communic ...

  6. python正则表达式(4)--search方法

    1.re.search函数 re.search 扫描整个字符串并返回第一个成功的匹配,如果匹配失败search()就返回None. (1)函数语法: re.search(pattern, string ...

  7. JS实现俄罗斯方块

    在80后.90后的儿时记忆里,俄罗斯方块是必备的消遣小游戏,它的玩法非常简单基本大家都懂,但如何用编程语言开发一款儿时同款「俄罗斯方块」,恐怕知道的同学就很少啦. 位置掩码和旋转掩码 俄罗斯方块游戏中 ...

  8. 欢迎访问阿里云Go Module代理仓库服务

    简介 go module公共代理仓库,代理并缓存go模块.你可以利用该代理来避免DNS污染导致的模块拉取缓慢或失败的问题,加速你的构建. 地址 https://mirrors.aliyun.com/g ...

  9. make命令与Makefile（转载）

    概述博客内容包含linux下make命令的使用与makefile的书写规则等,希望通过本文档使读者对make命令makefile文件有进一步了解,由于鄙人经验学识有限文档中会有描述不准确以及理解偏差, ...

  10. be of + 名词

    语法: “be of +抽象名词(词组)” 表示主语的某种形状或特征,相当于 "be+形容词" 例如: be of value=be valuable  : be of inter ...