北极寒流 » 网络资源 » LazyLoad开启页面缓冲完美实现图片延迟加载 - 2012.04.04

LazyLoad开启页面缓冲完美实现图片延迟加载

Lazy Load是一个用JavaScript编写的jQuery插件,它可以实现延迟加载图片的功能,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。不过,经常关注Lazy Load的朋友也许知道,以前版本的Lazy Load其实是个伪加载模式,长页面多图时,其表面实现了图片的延迟加载,实际上图片还是被下载的客户机上,所以它只能解决页面加载速度的问题,而不能解决减轻服务器压力的问题,甚至反而加重服务器压力。Lazy Load经过几次更新,最新版本的Lazy Load如果配合后台处理已经可以真正实现图片延迟加载了。

当初的Lazy Load插件有一大硬伤,如果不修改后台图片src属性,其表面实现了图片的延迟加载,实际上图片还是被下载的客户机上,并没有打到减轻服务器压力的目的。(实际上,在不修改后台代码的情况下,Lazy Load插件新版本仍然没有解决这一问题)那究竟后台代码要怎么处理才能让Lazy Load真正实现图片延迟加载呢?

最简单的方法是,在后台生成的img标签的src属性值设为占位符地址,和图片的实际地址设置到data-original属性上。如下代码

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

其中img/grey.gif为占位符,img/image.jpg为实际地址。

这个方法固然可以,但一来太麻烦,每次在编辑器里面设置图片的时候都需要单独改img的源代码,其此,在后台的编辑器预览的时候无法看到图片(src地址不是为真实的地址)。下面就给大家分享一种利用ob_start()页面缓冲区实现后台图片自动处理成上面的格式。

以wordpress为例,可以在header.php中的最上面加入以下代码:

<?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(); //将缓冲区输入到页面,并关闭缓存区

?>

经过这样设置以后,所有的图片地址都被替换了。

然后前台调用的代码为(第一句为加载JQ,如果你的主题已经加载JQ,就不用重复加载了,第二句为加载Lazy Load插件,请注意把它修正为你自己的文件路径):

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

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

<script type="text/javascript" charset="utf-8">

$(function() {$("img").lazyload();});

</script>

经过如此设置,即可让LazyLoad完美实现实现图片延迟加载功能。

资料来源:http://www.rainleaves.com/html/1248.html

ps:经笔者测试,在大部分情况下,上面的页面缓冲代码是没有问题的,但是如果你的主题采用了timthumb自动缩略图功能,那么就会出现所有的缩略图失效的情况,究其原因可能是由于匹配图片正则那里的书写没有考虑到timthumb缩图这一情况,希望有高手能指点一下该如何处理?

04

LazyLoad开启页面缓冲完美实现图片延迟加载

分享到:

最受欢迎的