前言

使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好。找了一些解决方法我统一记录一下。

layui图片懒加载使用方法

 layui.use(’flow’, function(){
var flow = layui.flow;
//当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
flow.lazyimg();
});
<img lay-src="aaa.jpg">
<img src="bbb.jpg" alt="該图不会懒加载">
<img lay-src="ccc.jpg">

loading占位图实现方法

img标签src为loading占位图的地址,lay-src为正图地址,图片懒加载时会替换src

<img src="loading.gif" lay-src="img.jpg">

修改js

lay/modules/flow.js  检索 &&!e.attr("src")

有三种修改方法

1.删除&&!e.attr("src")

2.改为&&e.attr("lay-src")

3.改为&&!e.attr("lay-src")

我这里用的第二种 其他的我也试了可以实现,你们自行测试

提供几个loading.gif

                  

原文章地址:

https://www.wanpishe.top/detail?blogId=fc9209e6-6c90-4eac-9019-e64c643cc988

layui图片懒加载-loading占位图的更多相关文章

  1. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  2. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  3. jq图片懒加载

    jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazyload.js ...

  4. jquery 图片懒加载

      jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...

  5. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  6. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  7. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  8. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  9. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

随机推荐

  1. JAVA SSL

    http://docs.oracle.com/javase/1.5.0/docs/guide/security/jsse/JSSERefGuide.html#InstallationAndCustom ...

  2. Win7+VS2010:mysql 源代码编译与调试

    win7+vs2010源代码编译mysql 近期因为在实习,工作重点在于一些数据库的开发,为了更好的理解数据库的实现机制.眼下萌生了要研究一下mysql数据库源代码的想法.那么好吧,说干就干.首先我们 ...

  3. java里的一些特别值得注意的地方

    return 语句的作用:1.返回值 2.结束某个方法的执行. 局部变量必需要初始化,全局变量系统会默认初始值: 整型数赋默认值为0. 浮点数赋默认值为0.0,boolean赋默认值为false. c ...

  4. 黑马day14 踢人小案例

    本案例介绍: 使用监听器来实现踢人小案例,仅仅有管理员才有踢人的功能. 1.搭建开发环境,导入本案例须要的jar包.以及一个准备好的数据库工具类:提供数据源的方法...当中我已经在数据库中加入了三个用 ...

  5. POJ 2570 Fiber Network(最短路 二进制处理)

    题目翻译 一些公司决定搭建一个更快的网络.称为"光纤网". 他们已经在全世界建立了很多网站.这 些网站的作用类似于路由器.不幸的是,这些公司在关于网站之间的接线问题上存在争论,这样 ...

  6. VS2008 集成Lua解释器

    1. 登陆官网下载源代码 -> www.lua.org -> get started ->  installing  选择系统类型(这里是Windows的,所下面载 luaDist) ...

  7. 使用深度学习检测DGA(域名生成算法)——LSTM的输入数据本质上还是词袋模型

    from:http://www.freebuf.com/articles/network/139697.html DGA(域名生成算法)是一种利用随机字符来生成C&C域名,从而逃避域名黑名单检 ...

  8. POJ 3666 DP

    题意: 思路: dp[i][j] 表示前i + 1个数变成单调且最后一个数是B[j],此时的最小成本 dp[i][j] = min(dp[i – 1][k]) + |A[i] – B[j]| [k = ...

  9. java高效判断素数

    java高效判断素数 package solution; public class Prime { // 偶数可以由有两个素数相加得到, 一个偶数可能有多个这样的两个素数, 请寻找到 这样两个素数,让 ...

  10. UI Framework-1: Native Controls

    Native Controls Background Despite the fact that views provides facilities for custom layout, render ...