关于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 17 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
原生JS实现留言板功能
Feb 08 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
JavaScript基本对象
2007/01/11 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
vue cli2.0单页面title修改方法
2018/06/07 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python安装以及IDE的配置教程
2015/04/29 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
python字符串查找函数的用法详解
2019/07/08 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
青年创业培训欢迎词
2014/01/08 职场文书
部队万能检讨书
2014/02/20 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
清明节寄语2015
2015/03/23 职场文书
欠款起诉书范文
2015/05/19 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python