乾坤 Blog

当我们浏览图片比较多的博客时，如果发现下拉滚动条图片才加载（图片延迟加载），这应该是一个很酷的用户体验。这一效果是通过jQuery插件实现的。所谓的jQuery插件就是用JavaScript编写的一段Js文件。通过加载这一插件，我们能够实现长页面中图片延迟加载的效果，也就是在浏览器可视区域外的图片不会被载入，直至将页面滚动到可视区域才加载相应图片。 使用这个插件可以加速载入包含有很多图片的文章。浏览器将会在加载可见图片之后进入就绪状态。在某些情况下还可以降低服务器负担.

实现这一效果的jQuery插件叫做：lazyload （下载地址）

由于我的博客经常有大量的图片，所以我折腾了一下，成功的实现了这个效果，感觉确实加快了访问多图片文章的载入速度。

我的具体实现如下：

1.下载lazyload.js并上传到主题相应的目录中

2.在header.php文件</head>标签前（最好在<?php wp_head(); ?>语句前）添加如下代码：

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/js/jquery.lazyload.js”></script>
<script type=”text/javascript”>
$(function() {
$(“img”).lazyload({
placeholder : “<?php bloginfo(‘template_directory’);?>/images/grey.gif”,
effect : “fadeIn”
});
});
</script>

第1行市说明调用jQuery库

第2行是说明lazyload.js文件的载入位置，<?php bloginfo(‘template_directory’);?>是调用相应主题路径的语句。

第5行img是延迟加载所有图片，可根据实际情况更改，有时候我们并不想将侧边栏的留言者的头像延迟加载，而只是要实现文章中的图片使用该效果，则根据实际情况修改相应的img语句即可，比如#post img

第6行语句是在图片加载前先用一个透明的灰色1×1像素的图片进行占位。

第7行是实现图片“淡入”的效果

当然上述只是我目前网页中的实现效果，它其他可用的效果还有很多，我就简略说一下：

1.当图片没有看到之前先把图片载入200像素（不设置的话，默认载入像素是零）

$(“img”).lazyload({ threshold : 200 });

2.在图片加载前先用一个透明的灰色1×1像素的图片进行占位

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

3.自定义触发事件进行载入：比如“click”（鼠标点击）和”mouseover”(鼠标滑过)等事件触发加载图片，使用自定义的事件, 如: sporty 和 foobar；默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置。 在灰色占位图片被点击之前阻止加载图片：

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

4.通过定义effect 参数来定义一些图片显示效果，比如fadeIn

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

5.图片在容器内显示：可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象.

CSS文件中：

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

JavaScript 代码：

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

6.当图片不连续时：当图片不是连续排列，我们滚动页面的时候，lazy load会循环加载图片。在循环加载中，它会检查图片是否在可见区域内，默认情况是在找到第一张不在可视区域内的图片后，会停止循环。图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

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

设定failurelimint参数为10，它会当载入10张照片之后，停止寻找图片载入；

7.延迟载入图片：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);
});

具体文章参见《Lazy Load Plugin for jQuery》