关于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编程小常识很有用
Nov 26 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
理解javascript回调函数
Dec 28 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python 元组操作总结
2019/09/18 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
TCP/IP模型的分界线
2012/12/01 面试题
报告会主持词
2014/04/02 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
个人党性分析材料
2014/12/19 职场文书
学生个人评语大全
2015/01/04 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
入党心得体会
2019/06/20 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
python3 hdf5文件 遍历代码
2021/05/19 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS