Lazyload.js用于延迟加载长页面图片，视窗滚动到其位置时会加载视窗外的图片，与预加载相反。本文主要介绍lazyload.js的详细讲解，有需要的朋友可以参考一下。
目录
介绍优点：通过预先加载——Threshold事件(可以是jquery事件也可以是自定义事件)来触发安装，——事件设置效果——效果滚动容器中的图片——容器乱序处理隐藏图片——skip_invisible
简介
Lazyload.js用于长页面图片的延迟加载。当窗口滚动到其位置时，视窗外的图片将被加载，这与预加载相反。
优点：
可以提高页面加载速度；在某些情况下，它还可以帮助减少服务器负载。
安装
凉亭安装：
$ bower安装jquery.lazyload
Npm安装：
$ npm安装jquery-lazyload
使用
Lazyload依赖和jquery。所以先介绍jquery和lazyload。
script src='jquery.js'/script
script src=' jquery . lazy load . js '/script
1.将图像路径写入data-original属性。
2.将名为lazy的类添加到lazyload的映像中。
3.选择所有图片(img.lazy)进行惰性加载，执行惰性加载()；
img class=' lazy ' data-original=' img/example . jpg ' style=' margin-top:1000 px ' height=' 200 '
脚本
$(function(){
$('img.lazy ')。lazy load()；
})
/脚本
注意：您必须设置图片的高度或宽度，否则插件可能无法正常工作。
提前加载——Threshold
当滚动到图片位置时，Lazyload默认加载图片。但是，您可以将阈值参数设置为当您滚动到远离它的xx px时加载。
$(function(){
$('img.lazy ')。lazyload({
门槛：20
});
})
上面的例子设置了当你从图片滚动到20px时，图片将再次开始加载。
事件触发(可以是jquery事件，也可以是自定义事件)——Event
当定义的事件被触发时，图片开始加载。
$(function(){
$('img.lazy ')。lazyload({
事件：“点击”
});
})
上面的例子让图像在开始加载前点击。
提示：你可以用它来实现图片的延迟加载。
$(function() {
$('img.lazy ')。lazyload({
事件：“运动型”
});
});
$(窗口)。bind('load '，function() {
var time out=setTimeout(function(){
$('img.lazy ')。触发器(“运动型”)
}, 5000);
});
上面的代码直到页面加载五秒钟后才开始加载图片。
设定效果——Effects
插件默认的加载效果是show()，你可以使用任何你想要的效果。下面的代码使用fadeIn()
$('img.lazy ')。lazyload({
效果：“淡入”
});
滚动容器内的图片——container
插件也可以用在滚动容器中的图片上。下面的div有一个scrollerbar，内容的内容滚动。当内容滚动到图像位置时，图像开始加载。
div style=' height:600 px；溢出：滚动' id='container '
img class=' lazy ' data-original=' img/example . jpg ' alt=' ' style=' margin-top:1000 px ' height=' 200 '
/div
脚本
$(function(){
$('img.lazy ')。lazyload({
容器：$('#container ')
});
})
/脚本
不顺序排列的图片
插件将执行一个循环来查找未加载的图像，这将检查图像是否可见。默认情况下，当找到第一个视图之外的图像时，循环将停止。但是有一种情况：页面布局图片的顺序和html图片代码的顺序不一致；会导致本该加载的东西没有加载。在这种情况下，您可以将failurelimit设置为10，这将使插件在找到10张不在可见区域的图片时停止搜索。如果你有恶心的布局，请把这个参数设置高一点。
代码：
$('img.lazy ')。lazyload({
失败_限制：10
});
处理隐藏图片——skip_invisible
为了提高性能，插件默认忽略隐藏图片；如果你想加载隐藏图片。将skip_invisible设置为false
注意：Webkit浏览器会自动将没有宽度和高度的图像视为不可见。
$('img.lazy ')。lazyload({
skip_invisible : true
});
关于lazyload.js的这篇文章到此为止，关于lazyload.js的更多细节请搜索我们之前的文章或者继续浏览下面的相关文章，希望大家以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。