关于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 覆盖和重载 函数
Sep 25 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
JavaScript中的History历史对象
2008/01/16 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python的faker库用法
2019/11/28 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
初一科学教学反思
2014/01/27 职场文书
活动总结报告格式
2014/05/09 职场文书
英文辞职信范文
2015/05/13 职场文书
化工生产实习心得体会
2016/01/22 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python