利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法。
最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及配置方法。
Github项目地址:https://github.com/tuupola/lazyload
本文使用的是1.9.7版本(实际与1.9.6版本一致)
首先需要引用jquery,如:https://libs.afengim.com/libs/jquery-3.5.1/jquery-3.5.1-min.js
之后引用jquery.lazyload.js
及jquery.scrollstop.js
1.实例代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Jquery lazyload</title><script src="https://libs.afengim.com/libs/jquery-3.5.1/jquery-3.5.1-min.js" type="application/javascript"></script><script src="https://libs.afengim.com/libs/lazyload-1.9.7/jquery.lazyload.min.js"type="application/javascript"></script><script src="https://libs.afengim.com/libs/lazyload-1.9.7/jquery.scrollstop.min.js"type="application/javascript"></script><style>img {max-width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/1.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/2.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/3.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/4.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/5.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/6.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/7.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/8.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/9.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/10.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/11.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/12.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/13.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/14.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/15.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/16.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/17.webp" height="574"width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/18.webp" height="574"width="765"/>
<script type="text/javascript">$(function () {$("img.lazy").lazyload({effect: "fadeIn",});});
</script>
</body>
</html>
打开网页后只加载当前屏幕内的图片,只有滚动或下拉浏览器才会加载底部的图片
2.初始化属性
使用jquery lazyload需要进行初始化才能生效延迟加载效果。
初始化代码:
<script type="text/javascript">$(function () {$("img.lazy").lazyload({effect: "fadeIn",});});
</script>
可以通过不定义.lazy样式
实现不带class="lazy"
即可初始化,会对该页面的全部img标签生效
全局初始化代码如下:
$("img").lazyload({effect: "fadeIn"});
可以在初始化代码$("img.lazy").lazyload({
后添加属性,以实现更多效果,每个属性以,结尾
需要为img标签添加lazy样式(lazy可以在初始化定义值),如:$("img.afengblog").lazyload
示例:
<img class="afengblog" data-original="test.png"/>
图片路径引用方法默认使用data-original
,也可以在初始化定义data-后的值。
如:data_attribute : "afengblog",
示例:
<img class="afengblog" data-afengblog="test.png"/>
以下介绍基础的使用属性:
threshold
属性可以提前加载图片,可以自定义高度,如:200
,则提前200高度加载图片。
effect
属性可以定义载入效果,一般为:fadeIn
(渐入效果)。
placeholder
属性可以设置全局图像占位符,如:data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=
此处也可以设置http地址图片或者base64图片,实现替换默认的加载图片。
effectspeed
属性可以设置动画持续时长, 单位毫秒,如:1000
(动画持续1000ms)
3.可用的初始化属性
$('img.lazy').lazyload({// threshold: 提前开始加载高度.threshold: 200,// failure_limit: 同 failurelimitfailure_limit: 10,// event: 设置何种事件触发时才加载, 默认 scrollevent: 'click',// effect: 使用何种载入效果effect: "fadeIn",// container: 对某容器中的图片实现效果container: $("#container"),// data_attribute: 用于设置 lazyload 操作的自定义属性(data-后面的属性名)data_attribute : "attr",// skip_invisible: 是否 不加载不可见图片. true 不加载, false 加载.skip_invisible : false,// appear: 用于在图片加载之前到显示图片之间的处理函数,一般用于展示加载动画.appear: function() {},// load: 用于图片加载完毕之后执行的函数.load: function() {},// placeholder: 设置占位图片路径placeholder : "img/lazy.gif",// failurelimit: 一次加载图片的张数(图片排序混乱时使用)failurelimit : 10,// effectspeed: 设置动画持续时长, 单位毫秒effectspeed : 1000,
});
各属性介绍
以下内容转自博文链接:https://blog.csdn.net/Leo_DLi/article/details/112315506
1, threshold: 默认值 0
threshold: 值为数字, 用于设置提前开始加载高度. 如设置为200, 表示滚动条在离目标位置还有 200 的高度时就开始加载图片, 可以做到不让用户察觉。
2, failure_limit : 默认值 0
failure_limit: 值为数字, 同 failurelimit(下文介绍)
3, event: 默认值 "scroll"
event: 用于设置触发加载的时机. 值有scroll(滚动), click(点击), mouseover(鼠标划过), sporty(运动的), foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
4, effect: 默认值 "show"
effect: 用于设置显示图片是的动画效果. 值有: show(直接显示), fadeIn(淡入), slideDown(下拉)等
5, container: 默认值 window
container: 值为某容器, 用于设置对某容器中的图片实现效果. lazyload默认在拉动浏览器滚动条时生效, 这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
6, data_attribute: 默认值 "original"
data_attribute: 用于设置 lazyload 操作的自定义属性(data-后面的属性名)
7, skip_invisible: 默认值 true
skip_invisible: 设置是否加载不可见的图片.
Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化. 如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false .
8, appear: 默认值 null
appear: 用于在图片加载之前到显示图片之间的处理函数,一般用于展示加载动画.
9, load: 默认值 null
load: 用于图片加载完毕之后执行的函数.
10, placeholder: 默认值 "data:image/png;base64,iV......"
placeholder: 用于设置占位图片.
值为某一图片路径. 此图片用来占据将要加载的图片的位置, 待图片加载时, 占位图则会隐藏
接下来的两个是兼容低版本的属性, 在该版本中正常使用.
11, effectspeed : 毫秒数
effectspeed: 用于控制动画的速度.
属性默认是空的, 所以如果不设置它, 动画的时间为400毫秒.
12, failurelimit: 值为数字. 在图片布局混乱时使用.
Lazy Load 有一个循环查找 img 的机制. 根据 HTML 文档的布局从上往下查找, 当找到第一个并未显示/加载的 img 时, 就会停止往下查找.(其实就是对 $("img.lazy") 这个对象(组)进行顺序查找)。
Demo地址:https://tools.afengim.com/demo/jquery-lazyload/
原文地址:https://www.afengblog.com/jquery-lazyload.html
利用Jquery Lazyload JS插件实现网页图片延迟加载相关推荐
- Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
之前一直有关注过Jquery.LazyLoad.js这个特效,但一直没有用,这几天研究了一下,并应用于实际中,对网站SEO方面没有什么帮助,不过可以节省一些流量,对于大网站来说显的尤为重要,至于节省了 ...
- jquery.lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- JQuery Easing.js插件
jQuery Easing.js 插件 介绍:easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果. 环境:因为easing是jQuery的插件,所以必须是在引入jquery之后再引 ...
- magento effects.js jquery.lazyload.js 冲突
2019独角兽企业重金招聘Python工程师标准>>> 当这两个js并存时,会造成加载图片闪烁的冲突问题 原因: jquery.lazyload.js会触发叫"appear ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录...
http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- table2excel 导出文字不居中的问题 附 jquery.table2excel.js 插件
正常js部分代码如下 ,很简单 $("#exportBtn").on("click",function(){$("#yearTable"). ...
- jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足! 问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下 ...
- jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
- IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题 参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...
最新文章
- NBT:Rob Knight团队发表微生物组数据降维新方法
- 10-表格添加、删除
- java对世界各个时区(TimeZone)的通用转换处理方法
- 常用的C++ STL
- MAC使用青花瓷(charles)抓包
- Pycharm破解版安装步骤
- 【历史上的今天】3 月 8 日:游戏机之父诞辰;搜索技术之父出生;MIT 公开演示旋风计算机
- unity游戏开发学习笔记
- 机器学习基石和机器学习技法_机器学习和洞穴寓言寓言
- Ubuntu下shift键失灵解决办法
- 唐诗赏析--唐诗的起源,发展
- 基于JAVA的葫芦娃救爷爷游戏
- 刚刚涉足神经网络,基于TensorFlow2.0以实现鸢尾花分类为例总结神经网络代码实现的几个步骤,附代码详细讲解
- 极验:验证码在黑灰产对抗中的角色和实践
- Android开发支付集成——微信集成
- 基于ssl协议和基于openssl工具创建私有CA
- canvas快速实现视频的一键截图功能
- 孙正义也喝了一口商汤
- 51nod 1486
- kalman简单例子——初始化参数对kalman性能的影响