LazyLoad+ob_start(),完美解决图片延迟加载 [jQuery 插件]

Lazy Load是一个用户延迟加载图片的jQuery插件。再配合后台ob_start()开启页面缓冲区,就能完美的解决图片延迟加载,在没有后台配合的情况下,Lazy Load只是一个伪懒加载模式,长页面,多图时,它只能解决页面加载速度的问题,而不能解决减轻服务器压力的问题,甚至反而加重服务器压力。具体下文介绍。

Lazy Load介绍

Lazy Load是一个用JavaScript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。在包含很多大图片长页面中延迟加载图片可以加快页面加载速度,在某些情况下,他还能减轻服务器的压力。
而关于Lazy Load的介绍,最早是来源于一英文博客:http://www.appelsiini.net/projects/lazyload(下文将重新介绍)
后经翻译为:http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/
不过这些都是一年多以前的事情了,时至今日,Lazy Load已经更新到了1.6.0-dev版,比起当初已经有了一些变化。不仅如此,当初的插件有一大硬伤,如果不修改后台图片src属性,其表面实现了图片的延迟加载,实际上图片还是被下载的客户机上,并没有打到减轻服务器压力的目的。(实际上,在不修改后台代码的情况下,该插件任然没有解决这一问题)
以下是Lazy Load的介绍,我将按照原博客的方式介绍。

如何使用?

Lazy Load是一jquery插件,必须于之前加载jQuery

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

调用方法

$("img").lazyload();
//这句代码使得页面中所有的图片都被延时加载

设置敏感度

插件提供了 threshold 选项,可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载。默认值为 0 (到达图片边界的时候加载)

$("img").lazyload({threshold : 200 });
//将临界值定为 200,当可视区域离图片还有 200 个象素的时候开始加载图片

占位图片(新版的Lazy Load插件中已经没有该属性)

你还可以设定一个占位图片并定义事件来触发加载动作。这时需要为占位图片设定一个URL地址。透明、灰色和白色的1×1象素的图片已经包含在插件里面。

$("img").lazyload({ placeholder : "img/grey.gif" });

注:在新版的Lazy Load插件中,已经找不到这个属性,可能作者并不希望希望使用者通过前台的方式来设置占位符,虽然这样可以加快页面的载入速度,但却并没有达到减轻服务器压力的目的,甚至还增加了服务器的请求数量(因为浏览器默认加载了页面当中的所有图片,只是没有显示,这个可以通过firefox下的firebug插件工具来查看,实际上一开始浏览器就加载了全部的图片。),那我们改如何解决呢?

通过后台代码设置占位符

上面说道新版的插件已经不支持前台设置占位符,那我们只有通过后台来设置已实现作者的初衷。最简单的方法是,在后台生成的img标签的src属性值设为占位符地址,和图片的实际地址设置到data-original属性上。如下代码

<img src="img/grey.gif" data-original="img/image.jpg"
width="800" height="577"/>

其中img/grey.gif为占位符,img/image.jpg为实际地址。(ps:图片的宽高最好写上,具体原因可见:关于html页面的重排和重绘,确定图片大小
这个方法固然可以,但一来太麻烦,每次在编辑器里面设置图片的时候都需要单独该img的源代码,其此,在后台的编辑器预览的时候无法看到图片(src地址不是为真是的地址嘛)。
方法二:开始页面缓冲区,在html输出的浏览器的时候将所有图片的src替换成data-original,同时设置原src为占位符。
拿wordpress为例,可以在header.php中的最上面加入以下代码:

 <?PHP ob_start();?>

ob_start()方法为开启页面缓冲区,具体含义可参看php ob_start及其相关方法详解
在页面footer.php最后加入以下代码:

<?php
//图片延缓加载相关处理,替换src为data-original,并添加占位符
$echo = ob_get_contents(); //获取缓冲区内容
ob_clean(); //清楚缓冲区内容,不输出到页面
$placeholder = "img/grey.gif"; //占位符图片
$preg = "/<img (.*)src(.*) \/>/i"; //匹配图片正则
$replaced = '<img \\1src="'.$placeholder.'" data-original\\2 />';
print preg_replace($preg, $replaced, $echo); //重新写入的缓冲区
ob_end_flush(); //将缓冲区输入到页面,并关闭缓存区
?>

经过这样设置以后,所有的图片地址都被替换了。
然后前台调用的代码为:

$("img").lazyload();

通过这样设置以后,所有的图片地址的修改都是在最后输出的到页面之前才完成的,好处显而易见,即不需要用户自己处理,又能避免后台编辑器无法预览图片。

事件触发加载

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

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});

使用特效

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

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

图片在容器里面

你可以将插件用在可滚动容器的图片上,例如带滚动条的 DIV 元素。你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面。
CSS 代码:

#container {
height: 600px;
overflow: scroll;
}

JavaScript 代码:

$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
});

当图片不顺序排列

滚动页面的时候,Lazy Load 会循环为加载的图片。在循环中检测图片是否在可视区域内。默认情况下在找到第一张不在可见区域的图片时停止循环图片被认为是流式分布的,图片在页面中的次序和 HTML 代码中次序相同。但是在一些布局中,这样的假设是不成立的。不过你可以通过 failurelimit 选项来控制加载行为。

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

将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索。如果你有一个猥琐的布局,请把这个参数设高一点。

延迟加载图片

Lazy Load 插件的一个不完整的功能,但是这也能用来实现图片的延迟加载.下面的代码实现了页面加载完成后再加载。页面加载完成 5 秒后,指定区域内的图片会自动进行加载。

$(function() {
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout=setTimeout(function() {$("img").trigger("sporty")},5000);
});

下载插件

jquery.lazyload-1.6-dev
jquery.lazyload-1.5

演示

雨打浮萍[多图]

部分内容转自:Lazy Load, 延迟加载图片的 jQuery 插件

马上分享给你的朋友吧~

LazyLoad+ob_start(),完美解决图片延迟加载 [jQuery 插件]》上有 18 条评论

  1. 找了网上很多地方,可能是你的这个方法是最实用的,不过在我主题上有点问题,由于我主题用了timthumb.php来缩图,这时如果采用这种方法就出问题了(文章中的图片没问题,可以正常替换src为data-original)但是有缩图的地方就不对了被替换成下面这样了
    不知道改怎么修改,不知道是否图片匹配的原因,

  2. img src=”http://127.0.0.1/wordpress/wp-content/themes/dlep/timthumb.php?src=” img=”" grey.gif”=”" data-original=”http://127.0.0.1/wordpress/cache/InDesignCS5InDesignCS5PDF.jpg&h=125&w=125&zc=1"” class=”thumb”

  3. 你好,我一直在做wordpress的图片迟加载插件,simple-lazyload,不知道你有没有把这个做成wordpress插件,期待你的回复。

  4. 照你的方法 我有的成功了 有的图片不成功不知道为什么

  5. 这样的话把页面所有的图片都延迟加载了。有没办法按需要的加载啊,有些网页上的小图片没必要延迟加载的

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>