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

时间：2024-06-16 23:37:32

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。

一、使用方法说明

//载入JavaScript文件

<script src="./jquery-3.1.1.min.js"></script>

<script src="./jquery.lazyload.js"></script>
//img标签的4个属性一个都不能少，否则不能实现延迟加载的效果，如下：

<img class="lazy" data-original="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg" width="100%" height="480" />

<img class="lazy" data-original="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg" width="100%" height="580" />

<img class="lazy" data-original="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg" width="100%" height="580" />

<img class="lazy" data-original="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg" width="100%" height="580" />
//使用

$(function(){

        $("img").lazyload({

         threshold:20,
　　　　  effect : "fadeIn"

        });

});

二、常用属性说明

effect : "fadeIn", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)

threshold : 200, //预加载，表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

event: 'click',  // 事件触发时才加载，click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll（滑动）

container: $("#container"), // 指定对某容器中的图片实现效果

failure_limit：2, //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,

                   failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.

placeholder : "img/grey.gif" 值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏

三、其它方法

echo.js方式

一款非常简单实用轻量级的图片延时加载插件echo.js，如果你的项目中没有依赖jquery，那么这将是个不错的选择，50行代码，压缩后才1k。当然你完全可以集成到自己项目中去！

下载地址：https://github.com/helijun/helijun/tree/master/plugin/echo

相关文章