关于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一点特殊用法
May 28 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
python 自动提交和抓取网页
2009/07/13 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python开发游戏的前期准备
2019/05/05 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
flask开启多线程的具体方法
2020/08/02 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
租房协议书范本
2014/04/09 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书