关于layui flow loading占位图的实现方法


Posted in Javascript onSeptember 21, 2019

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

关于layui flow loading占位图的实现方法

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" 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>

图片目录:

关于layui flow loading占位图的实现方法

修改方法:

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占位图的实现方法

修改完成后效果:

关于layui flow loading占位图的实现方法

注意: 关于layui flow loading占位图的实现方法

以上这篇关于layui flow loading占位图的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
详解用node编写自己的cli工具
May 23 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 #Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 #Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 #Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 #Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 #Javascript
Vue登录主页动态背景短视频制作
Sep 21 #Javascript
layui table 获取分页 limit的方法
Sep 20 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
第二节 对象模型 [2]
2006/10/09 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python坐标线性插值应用实现
2019/11/13 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
农村婚礼证婚词
2014/01/08 职场文书
团队激励口号
2014/06/06 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
初中物理教学反思
2016/02/19 职场文书