layui flow loading占位图实现方法
如果流图片要加载失败, 就会显示找不到图片的裂痕
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css" 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>
图片目录:
修改方法 :
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图片懒加载-loading占位图
前言 使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好.找了一些解决方法我统一记录一下. layui图片懒加载使用方法 layui.use(’flow’ ...
- iOS开发造轮子 | 通用占位图
https://www.jianshu.com/p/beca3ac24031 实际运用场景: 没网时的提示view,tableView或collectionView没内容时的展示view,以及其它特殊 ...
- [RN] React Native Image 实现placeholder占位图
React Native Image 实现placeholder占位图 react-native Image没有placeholder这样的props,但是业务有需要这种场景, 解决方法为: 使用Im ...
- Skeleton Screen加载占位图(内容出现前显示灰色占位图)的分析与实现
今天有几个好友问了这个叫加载占位图的实现方法,我还在此问题下做了个回答.由于国内对这个的名词是各有各的叫法,所以这里直接用加载占位图来解释.相信很多人都看到过图中这样的加载方式: 这个图是一个国内知名 ...
- 零行代码为App添加异常加载占位图
前文提要 近期准备重构项目,需要重写一些通用模块,正巧需要设置App异常加载占位图的问题,心血来潮设想是否可以零行代码解决此问题,特在此分享实现思路. 思路分享 对于App占位图,通常需要考虑的控件有 ...
- iOS开发——无网占位图的实现
https://www.jianshu.com/p/d537393fe247 https://github.com/wyzxc/CQPlaceholderViewhttps://github.com/ ...
- [iOS]一行代码集成空白页面占位图(基于runtime+MJRefresh思想)
2018年01月03日阅读 2472 [iOS]一行代码集成空白页面占位图(基于runtime+MJRefresh思想) LYEmptyView 此框架是本人在5,6个月前,公司启动新项目的时候, ...
- 零行代码为 App 添加异常加载占位图
前文提要 近期准备重构项目,需要重写一些通用模块,正巧需要设置App异常加载占位图的问题,心血来潮设想是否可以零行代码解决此问题,特在此分享实现思路. 思路分享 对于App占位图,通常需要考虑的控件有 ...
- [问题解决]Fresco设置占位图不显示的问题
[问题解决]Fresco设置占位图不显示的问题 /** * Created by diql on 2017/02/15. */ 问题说明 本来设置占位图是通过以下方法: public void set ...
随机推荐
- 【TCP】TCP三次握手与四次挥手
一.TCP三次握手 第一次握手:Client 将标志位 SYN=1 ,随机产生一个值 seq=J ,并将该数据包发送给 Server .此时,Client 进入SYN_SENT 状态,等待 Serve ...
- Windos7 安装 thumbor 遇到的python版本问题
(py36) C:\Users\Administrator>thumbor --port= Traceback (most recent call last): File , in _run_m ...
- 无法打开jetbrains官网
找到下面hosts文件,用记事本打开,删除关于jetbrain的文字 需要管理员权限才能操作这个文档: 先后输入cmd和 notepad hosts 删除掉关于jetbrains的模块,再次访问htt ...
- Android Studio--Logcat
他只是坐在那里,嘴里说:“做这个!做那个!当然,什么都不会发生,光说不做是没有用的” --哈里·杜鲁门“论<总统的权利>” 移动端的技术演进愈演愈烈,原生突破口已被打破. flutter. ...
- urdf 学习记录
1.URDF(Unified Robot Description Format),统一的机器人描述文件格式.主要用来描述机器人的几何形状,在可视化时(如RViz中)显示出机器人的几何形状.与画图软件( ...
- Linux libcurl安装及注意事项
一.下载 官网下载地址 : https://curl.haxx.se/download.html 选择最新的一个即可. 二.安装 1.解压 下载到的压缩包为curl-7.51.0.tar.gz,使用 ...
- Flutter 数据存储之 shared_preferences
资源名称 网址 github https://github.com/flutter/plugins/tree/master/packages/shared_preferences Flutter 数据 ...
- datagrid 溢出文本显示省略号 转载
http://www.jeasyuicn.com/?sort=3 .datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, . ...
- sed 用法
sed 用法 sed的其他用法如下: 1.删除行首空格 sed 's/^[ ]*//g' filename sed 's/^ *//g' filename sed 's/^[[:space:]]*// ...
- Day01~15 - Python语言基础
Day01 - 初识Python Python简介 - Python的历史 / Python的优缺点 / Python的应用领域 搭建编程环境 - Windows环境 / Linux环境 / MacO ...