jQuery图片延迟加载插件jQuery.lazyload

显示全部楼层 · 2024-10-3 10:46:08

使用方法
引用jquery和jquery.lazyload.js到你的页面

<script src="jquery-1.11.0.min.js"></script><script src="jquery.Lazyload.js?v=1.9.1"></script>

复制代码

HTML图片调用方法
为图片加入样式lazy 图片路径引用方法用data-original

<img class="lazy" data-original="img/bmw_m1_hood.jpg"><img class="lazy" data-original="img/bmw_m1_side.jpg"><img class="lazy" data-original="img/viper_1.jpg"><img class="lazy" data-original="img/viper_corner.jpg"><img class="lazy" data-original="img/bmw_m3_gt.jpg"><img class="lazy" data-original="img/corvette_pitstop.jpg">

复制代码

js出始化Lazyload并设置图片显示方式

<script type="text/JavaScript" charset="utf-8"> $(function() { $("img.lazy").lazyload({effect: "fadeIn"}); });</script>

复制代码

在图片中也可以不使用 class="lazy"，初始化时使用：

$("img").lazyload({effect: "fadeIn"});

复制代码

这样就可以对全局的图片都有效！

如果想提载入图片，可以使用 threshold 进行设置，

$("img.lazy").lazyload({ threshold :180});

复制代码

以上实例的含义是：在图片距离屏幕180px时提前载入

参数设置

$("img.lazy").lazyload({ placeholder : "img/grey.gif", //用图片提前占位 // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 effect: "fadeIn", // 载入使用何种效果 // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold: 200, // 提前开始加载 // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉 event: 'click', // 事件触发时才加载 // event,值有click(点击),mouSEOver(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… container: $("#container"), // 对某容器中的图片实现效果 // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 failurelimit : 10 // 图片排序混乱时 // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.});

复制代码

再引用一篇详解:https://www.cnblogs.com/yzg1/p/5051554.html

提前加载——Threshold
lazyload默认是当滚动到该图片位置时，加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。

$(function(){

$("img.lazy").lazyload({threshold :20}); })

复制代码

上面的例子设置了滚动到距离图片20px时，图片就开始再开始加载

事件触发(可以是jquery事件，也可以是自定义事件)——Event
当触发定义的事件时，图片才开始加载

$(function(){

$("img.lazy").lazyload({ event : "click" }); })

复制代码

上面的例子使图片点击后，才开始加载

Tip:你可以使用这个来实现图片的延迟加载

$(function() { $("img.lazy").lazyload({ event : "sporty" });});
$(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);});

复制代码

上面的代码在页面加载完毕后五秒才开始加载图片

设定效果——Effects
插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn()

$("img.lazy").lazyload({ effect : "fadeIn"});

复制代码

滚动容器内的图片——container
插件也可以使用在滚动容器内的图片上。下面的div拥有scrollerbar，内容的内容进行滚动，滚到图片位置时，图片开始加载

<div style="height:600px;overflow:scroll" id="container"> <img class="lazy" data-original="img/example.jpg" alt="" style="margin-top:1000px" height="200"></div><script> $(function(){ $("img.lazy").lazyload({ container: $("#container") }); })</script>

复制代码

不顺序排列的图片
插件会执行一个寻找未加载图片的循坏，该循环会检查图片是否可见，默认情况下，当第一个视图外的图片被找到，循环就会停止。

但是存在一种情况：页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 ，它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。

代码：

$("img.lazy").lazyload({ failure_limit : 10});

复制代码

处理隐藏图片——skip_invisible
为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false;

注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见

$("img.lazy").lazyload({ skip_invisible : true});

复制代码