图片的懒加载以及jquery.lazyload.js的使用实例-js教程-PHP中文网

在项目中有时候会用到图片的延迟加载，那么延迟加载的好处是啥呢？

我觉得主要包括两点吧，第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度；第二是帮助降低服务器负担。

下面介绍一下常用的延迟加载插件jquery.lazyload.js以及怎样实现一个延迟加载的插件。

一：jquery.lazyload.js插件

lazyload是jQuery写的延迟加载插件，在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。

实现原理

首先选中的img元素都绑定了一个appear事件(处理img显示真实的图片地址)，方便以后满足条件时触发该事件；

在配置对象中有一个container属性配置，默认为window，如果img元素在该container容器视口中，则触发appear事件；

为了判断img元素是否在container容器视口范围中，有如下四个方法：

$.belowthefold = function(element, settings) {};    // 在视口下方$.rightoffold = function(element, settings) {};        // 在视口右方$.abovethetop = function(element, settings) {};        // 在视口上方$.leftofbegin = function(element, settings) {};        // 在视口左方

登录后复制

具体使用

1.页面引入方式

由于延迟加载lazyload是依赖jquery的，所有页面需要引入jquery，如下：

<script src="jquery.js?1.1.11"></script><script src="jquery.lazyload.js?1.1.11"></script>

登录后复制

基本写法：

<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
    $("img.lazy").lazyload();
});

登录后复制

其中的data-original 属性存放真实的图片url路径。

小贴士：你必须设置图片的宽度或者高度在css中，否则插件可能不能正常工作。

设置Threshold

默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置 threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载。

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

登录后复制

设置事件触发加载

事件可以是任何 jQuery 事件, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

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

登录后复制

当然，你也可以用下面的这种方式实现延迟加载：

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

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

登录后复制

即是页面加载完成 5 秒后,再去执行图片的懒加载。

延迟加载效果

当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果：

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

登录后复制

不支持JavaScript的浏览器的使用方式

几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写