关于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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
jquery indexOf使用方法
Aug 19 Javascript
javascript基本类型详解
Nov 28 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Javascript创建类和对象详解
May 31 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 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中获取时间的下一周下个月的方法
2014/03/18 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
this和执行上下文实现代码
2010/07/01 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
最基础的Python的socket编程入门教程
2015/04/23 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
python manage.py runserver流程解析
2019/11/08 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
多媒体专业自我鉴定
2014/02/28 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
个人党性分析材料
2014/12/19 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
Python经常使用的一些内置函数
2022/04/11 Python