下面是详细的jQuery插件lazyload.js延迟加载图片的使用方法攻略。
简介
lazyload.js是一款轻量级的jQuery插件，可以帮助网站实现图片的延迟加载，减少网站的加载时间。该插件使用非常简单，只需引入js文件并初始化即可。
安装
使用lazyload.js需要在HTML页面中引入jQuery库和lazyload.js文件，具体代码如下：
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/lazyload.min.js"></script>
</head>
使用方法
基本使用
在页面中需要延迟加载的图片标签中添加 data-original属性，属性值为需要加载的图片地址。然后使用 lazyload() 方法初始化插件即可。
<img data-original="image1.jpg" alt="">
<img data-original="image2.jpg" alt="">
<img data-original="image3.jpg" alt="">
$(function() {
$("img").lazyload();
});
高级用法
lazyload.js提供了丰富的API和参数设置，可以满足更多复杂的需求。
参数设置
threshold：设置距离可视区域多少距离时开始加载。默认值为0，表示图片完全进入可视区域时才开始加载。placeholder：设置占位图，即未加载完成时显示的图片。可以是图片地址或者base64编码。默认值为插件自带的透明图片。effect：设置图片加载效果，该参数支持的值有：fadeIn、show和null。默认值为show。effectTime：设置图片加载效果的时间，单位为毫秒，默认值为400。
$("img").lazyload({
threshold : 200, // 距离可视区域200px时开始加载
placeholder: "images/loading.gif", // 自定义占位图
effect: "fadeIn", // 加载图片时使用fade效果
effectTime: 800 // 加载图片效果的时间设置为800毫秒
});
事件监听
load：当图片被加载成功时触发。error：当图片加载失败时触发。
$("img").lazyload({
load: function() {
console.log("图片加载成功");
},
error: function() {
console.log("图片加载失败");
}
});
示例说明
示例1：基本使用
在页面中添加以下代码：
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/lazyload.min.js"></script>
</head>
<body>
<img src="images/placeholder.gif" data-original="images/image1.jpg" alt="">
<img src="images/placeholder.gif" data-original="images/image2.jpg" alt="">
<img src="images/placeholder.gif" data-original="images/image3.jpg" alt="">
<script>
$(function(){
$("img").lazyload();
});
</script>
</body>
这里我们使用了默认设置，不传入任何参数，当页面加载完成后，图片并未完全加载，只有当页面滚动到相应位置时才会加载。
示例2：高级用法
在页面中添加以下代码：
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/lazyload.min.js"></script>
</head>
<body>
<img src="images/placeholder.gif" data-original="images/image1.jpg" alt="">
<img src="images/placeholder.gif" data-original="images/image2.jpg" alt="">
<img src="images/placeholder.gif" data-original="images/image3.jpg" alt="">
<script>
$(function(){
$("img").lazyload({
threshold : 200,
placeholder: "images/loading.gif",
effect: "fadeIn",
effectTime:800,
load: function() {
console.log("图片加载成功");
},
error: function() {
console.log("图片加载失败");
}
});
});
</script>
</body>
这里我们设置了一些高级参数，当页面滚动到距离可视区域200px时就会开始加载，加载完毕的图片使用fade效果显示，同时设置了加载效果的时间为800毫秒，当图片成功加载时会输出"图片加载成功"，如果加载失败，则会输出"图片加载失败"。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery插件lazyload.js延迟加载图片的使用方法 - Python技术站
微信扫一扫 
支付宝扫一扫 