图像的延时加载lazyload.js

Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.

图片延时加载能让网站的加载速度变快，有时他还能减缓服务器的压力。

For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, page with gazillion images and load images using timeout.

上面的demo（每个链接）方便使用者快速上手。

Heads up! When checking the demos clear browser cache between each request. You can check what is actually loaded with developers console (Chrome, Safari and IE) or FireBug (Firefox).

每次请求时注意清缓存！

Lazy Load depends on jQuery. Include them both in end of your HTML code:该插件依赖于jQuery

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

You must alter your image tags. Address of the image must be put into  data-original  attribute. Give lazy loaded images a specific class. This way you can easily control which images plugin is binded to.

使用时需要修改img标签，将图片的路径写进图片的data-original属性里面去，并给这些需要延时加载的图片一个特殊的类名，方便js绑定。

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

PRO TIP!  You must set image dimensions either as  width  and  height attributes or in CSS. Otherwise plugin might not work properly.

图片最好设置宽和高以免插件运行不正常

Setting Threshold

By default images are loaded when they appear on the screen. If you want images to load earlier use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.

设置图片提前加载，例如当图片距离显示200px时开始加载

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

Event to Trigger Loading

You can use jQuery event such as click or mouseover. You can also use custom events such as sporty or foobar. Default is to wait until user scrolls down and image appears on the viewport. To load images only when user clicks them you could do:

该插件还支持一些其他的事件类型

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

PRO TIP!  You can use this for tricks like delayed loading of images. Following code waits five seconds after rest of page has finished loading before it loads images. See it working at  delayed loading demo .也可以让图片延时一定时间加载

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

Using Effects

By default plugin waits for image to fully load and calls show(). You can use any effect you want. Following code uses fadeIn effect. Check how it works at effect demo page.可以使用一些特效

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

Fallback for Non JavaScript Browsers

Practically everyone has JavaScript enabled. However if you still want to support non JavaScript users you can include the real image tag inside <noscript></noscript> block.

不支持javascript的浏览器就使用下面的方法兼容下吧

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript>
    <img src="img/example.jpg" width="640" heigh="480">
</noscript>

To prevent both placeholder and the real image showing at the same time hide the placeholder with css.

.lazy {
    display: none;
}

For JavaScript enabled browser you must enable displaying the placeholders when documents loads. This can be done at the same time when initializing the plugin.

$("img.lazy").show().lazyload();

Images Inside Container

You can also use plugin for images inside scrolling container, such as div with scrollbar. Just pass the container as jQuery object. There is a demo for horizonta and vertical container.

某个容器内的图片延时加载也可以实现

#container {
    height: 600px;
    overflow: scroll;
}
 
$("img.lazy").lazyload({
    container: $("#container")
});

When Images Are Not Sequential

After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limitsetting.

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

Setting  failure_limit  to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high. Worst case being the actual number of images.

Dealing With Invisible Images

There are cases when you have images which are in viewport but not :visible. To improve performance you can ignore .not(":visible") images.

$("img.lazy").lazyload({
    skip_invisible : true
});

对于隐藏的图片的处理方法
HEADS UP!  Webkit browsers will report images with without  width  and  height  as not  .not(":visible") . This causes images to appear only when you scroll a bit. Either fix your image tags or keep  skip_invisible as  false . Use this feature only if you know what you are doing.

Install

You can install with bower or npm.

$ bower install jquery.lazyload
$ npm install jquery-lazyload

下载地址:
原版的：
缩减版的：