关于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 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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 curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
np.random.seed() 的使用详解
2020/01/14 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
大学生护理专业自荐信
2013/10/03 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
七年级历史教学反思
2014/02/05 职场文书
设计顾问服务计划书
2014/05/04 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
2014年信用社工作总结
2014/11/25 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS