layui图片懒加载-loading占位图
前言
使用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占位图的更多相关文章
- 前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
- 前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...
- jq图片懒加载
jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazyload.js ...
- jquery 图片懒加载
jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- 图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
随机推荐
- fileOP
public void getFileDir(String filePath) { try{ this.tv.setText("当前路径:"+filePath);// 设置当前所在 ...
- HTML5 canvas炫酷棱镜效果的幻灯片特效
这是一款效果很炫酷华丽的HTML5 canvas带棱镜效果的幻灯片特效. 这个特效在每个幻灯片的前面放置一个图形.并将图形制作为三棱镜效果.它底下的幻灯片图片会被"折射"到棱镜上面 ...
- opencv矩阵运算(2)
简单介绍 本篇承接上一篇.继续opencv下矩阵计算的函数使用. 计算矩阵的逆 注意:矩阵A是可逆矩阵的充分必要条件是行列式detA不等于0. 详细代码 double x[3][3] = {{1, 2 ...
- [Perl系列—] 2. Perl 中的引用使用方法
Perl 中的引用,为什么要使用引用? 对于熟悉C语言的开发人员来说, 指针这个概念一定不陌生. Perl 的引用就是指针,能够指向变量.数组.哈希表甚至子程序. Perl5中的两种Perl引用类型为 ...
- 【CTO辩论会】移动开发人员忠于技术or 背离技术
第一期CTO辩论会结束后,大家在微信群中讨论,学什么编程语言好.有位官人直呼"劳力者治于人,苦差,不学也罢". 在IT.科技变革世界的今天,移动开发人员成为一个很时髦的工种. 就连 ...
- 使用iOS原生sqlite3框架对sqlite数据库进行操作
摘要: iOS中sqlite3框架可以很好的对sqlite数据库进行支持,通过面向对象的封装,可以更易于开发者使用. 使用iOS原生sqlite3框架对sqlite数据库进行操作 一.引言 sqlit ...
- Java JNI 入门篇——传递数组与修改数组
这里不在重复JavaJNI 的开发过程了,不熟悉的同学请参考:Java JNI HelloWorld 直接上主要代码: ArrayJNI.Java package com.example.jni; p ...
- nyoj--42--一笔画问题(并查集)
一笔画问题 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下来. ...
- hdoj--1005--Number Sequence(规律题)
Number Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 7. 关于IntelliJ IDEA删除项目
转自:https://www.cnblogs.com/zhangqian27/p/7698148.html 刚开始使用IDEA . 自己创建项目玩,结果发现IDEA无法删除,我也是醉了,Eclipse ...