关于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学习笔记记录我的旅程
May 23 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
js css+html实现简单的日历
Jul 14 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php自定义错误处理用法实例
2015/03/20 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
Python运算符重载用法实例分析
2015/06/01 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
工作期间打牌检讨书范文
2014/11/20 职场文书
实习单位意见
2015/06/04 职场文书
神秘岛读书笔记
2015/07/01 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js
使用Python开发冰球小游戏
2022/04/30 Python