关于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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
vue实现循环滚动列表
Jun 30 Javascript
Element Rate 评分的使用方法
Jul 27 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 保留字列表
2012/10/04 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
如何使用php实现评委评分器
2015/07/31 PHP
php实现评论回复删除功能
2017/05/23 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python函数参数类型*、**的区别
2015/04/11 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
聚网科技C++面试笔试题
2015/09/01 面试题
中秋客户感谢信
2015/01/22 职场文书
导游词400字
2015/02/13 职场文书