关于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>

图片目录：

修改方法：

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占位图的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui table复选框禁止某几条勾选的实例

    Layui table复选框禁止勾选 var list = [0,1,3];//获得禁用的tr的行index //遍历设置复选框禁用 for(var i=0;i<list.length;i++){ $(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop('disabled',true); $(".layui-table tr[data-index="+

  • 解决layui动态加载复选框无法选中的问题

    问题描述 1.最近用layui做后台界面,遇到layui跟ajax数据动态加载的checkbox,偶尔不能正常勾选,取消 2.有分页时,最后一页数据过少会导致其他页下方数据无法选中 3.页面没加载完或暴力测试时也会不能选中 利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况,但是暴力测试时偶尔还会出现,实在不知道什么原因,所以就用了一个折中的方法--自己写一个复选框 <!--原有layui复选框--> <td> <div class="la

  • LayUi使用switch开关,动态的去控制它是否被启用的方法

    layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用.当时如果当前记录的某个值没有进行填写,这行记录就不能被启用.并且页面上也要让他不能进行操作. 直接上代码: // 页面状态栏事件监听 form.on('switch', function (data) { var swithcData = data; var id = data.value;// 获取要修改的ID var state = this.checked ? '0' : '2';// 当前状态值 $.ajax({

  • layui table 获取分页 limit的方法

    如下所示: var table_name = table.render({ }); page_size = table_name.config.limit; table_name 是自定义变量 以上这篇layui table 获取分页 limit的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui switch 开关监听 弹出确定状态转换的例子

    不废话,直接上图: 原始状态: 点击确定: 点击取消或者X 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="static/layui/css/layui.css"

  • LayUI switch 开关监听 获取属性值、更改状态的方法

    背景 今天在设计页面时,想使用一下 LayUI 的 switch 控件,在需要更改状态的时候进行 ajax请求传输 需要获取其中的自定义属性值,同时根据服务器返回数据进行状态的更改 通过参考文档及网友的经验,在此整理一番 使用方法 场景: 后台商品列表页,进行上下架状态的修改 ①. html 代码参考 着重注意 我设置的两个属性值 lay-filter,switch_goods_id <input type="checkbox" class="switch_checke

  • 关于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&quo

  • vue自定义加载指令v-loading占位图指令v-showimg

    vue自定义加载指令v-loading占位图指令v-showimg

    目录 了解自定义指令的钩子函数 注册成为全局指令 需求描述 列表组件 ListCom.vue 加载动画组件 LoadingCom.vue 钩子函数 loading.js 分析上面的代码 main.js 中 注册成为全局指令 页面中使用加载动画指令 v-loading 占用图指令 v-showimg 占位图组件 ShowImgCom.vue 指令的书写 showimg.js main.js注册 指令的使用v-showimg指令 了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候

  • layui框架与SSM前后台交互的方法

    采用layui前台框架实现前后台交互,数据分页显示以及删除操作,具体方式如下: 一.数据分页显示 1.前端 (1)html页面 <!--轮播数据分页显示--> <table class="layui-hide" id="content_lbt" lay-filter="content_lbt_filter"></table> (2)请求渲染数据 $(function() { /*轮播数据分页显示*/ layui

  • 安装ImageMagick出现error while loading shared libraries的解决方法

    本文实例讲述了安装安装ImageMagick出现error while loading shared libraries的解决方法.分享给大家供大家参考.具体解决方法如下: 运行程序时,如遇到像下列这种错误: ./tests: error while loading shared libraries: xxx.so.0:cannot open shared object file: No such file or directory 那就表示系统不知道xxx.so 放在哪个目录下. 这个时候就要

  • layui table数据修改的回显方法

    实现的样式给你们看一波 点击这锅按钮 其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event; // 获得 lay-event 对应的值(也可以是表头的event 参数对应的值) var tr = obj.tr; // 获得当前行 tr 的DOM对象 if (l

  • layui多iframe页面控制定时器运行的方法

    我们web页面中有几个页面是有定时器在刷新的,并且查询的内容还不少,给服务器造成了不少压力.这些接口已经尽量优化,能放到缓存的都放到缓存.然后主管又提了一个需求,就是我们使用的是layui多标签iframe框架,当不在某个页面的iframe时不要执行定时器.我觉得这是一个挺不错的提议,而且实现起来也不难. 粗略地考虑有两个思路,一个是点击标签时开启或关闭定时器,一个是定时器执行时判断所在的iframe是否隐藏,如果隐藏则不执行定时器的方法.第一种维护麻烦,难免有错漏的情况,而且和别的iframe

  • 在layui中select更改后生效的方法

    在layui中重新渲染表单这一步比较重要,部分表单元素需要重新渲染后才能生效,例如select 建议在js中放入以下function: //重新渲染表单 function renderForm(){ layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.render(); }); } 在每次操作部分表单元素后都进行一次调用 以上这篇在layui中select更改后生效的方法就是小编分

  • layui select 禁止点击的实现方法

    直接上代码啦 注意事项: 1. 必须写 layui.use([form]) 2. 先把属性设置为disabled 3. 再form.render()一下 以上这篇layui select 禁止点击的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在layui.use 中自定义 function 的正确方法

    适用于: obj.click() 行内 onclick javascript:函数名() 示例代码: <html> <head> <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" media="all"> </head> <body> <a class="

  • layui使用templet格式化表格数据的方法

    增加js /*---------------------格式化时间开始--------------------------*/ //对Date的扩展,将 Date 转化为指定格式的String //月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, //年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) //例子: //(new Date()).Format("yyyy-MM-dd hh:mm:ss.S")

随机推荐