关于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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
js 获取时间间隔实现代码
May 12 Javascript
javascript相关事件的几个概念
May 21 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
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数字格式化
2006/12/06 PHP
php的hash算法介绍
2014/02/13 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
js实现打字小游戏
2019/12/17 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
快速了解Python中的装饰器
2018/01/11 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python计算两个数的百分比方法
2018/06/29 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
python判断元素是否存在的实例方法
2020/09/24 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
新闻网站实习自我鉴定
2013/09/25 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
学习两会精神心得范文
2014/03/17 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript