关于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 基础篇之运算符、语句(二)
Apr 07 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
js实现音乐播放控制条
Sep 09 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
供参考的 php 学习提高路线分享
2011/10/23 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
如何让你的JS代码更好看易读
2017/12/01 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
房屋买卖委托公证书
2014/04/08 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
自查自纠整改报告
2014/11/06 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python