关于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 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
JavaScript实现网页留言板功能
Nov 23 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/10/09 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
Python中正则表达式详解
2017/05/17 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
新书吧创业计划书
2014/01/31 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
保险公司年会主持词
2014/03/22 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
2014年技术部工作总结
2014/12/12 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
员工升职自我评价
2019/03/26 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL