利用 Jquery Lazyload JS 插件实现网页图片延迟加载

2022-10-31 12:44 113 抢沙发阿峰博客 0

阿峰博客 这位站长很懒，什么都不想写

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/>
图片路径引用方法默认使用data-original，也可以在初始化定义 data-后的值。
如：data_attribute : "afengblog",
示例：<img/>

以下介绍基础的使用属性：

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: 同 failurelimit
failure_limit: 10,
// event: 设置何种事件触发时才加载, 默认 scroll
event: '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/