关于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的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
javascript打开word文档的方法
Apr 16 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
python保存字符串到文件的方法
2015/07/01 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
python GUI实例学习
2017/11/21 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python绘制圆柱体的方法
2018/07/02 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
python名片管理系统开发
2020/06/18 Python
pytorch简介
2020/11/11 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
软件工程专业推荐信
2013/10/28 职场文书
国际贸易专业推荐信
2013/11/15 职场文书
大学军训感言
2014/01/10 职场文书
迟到检讨书500字
2014/02/05 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
新闻编辑求职信
2014/07/13 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL