JavaScript之延迟加载

本文参阅http://www.appelsiini.net/projects/lazyload

Javascript Lazyload延迟加载特效,有效降低HTPP连接次数，提高首屏加载时间

1、增加了图片预加载可选

2、修改了图片本身就在可视范围的时候直接显示而不需要滚动条触发

3、修改了Splice删除数组的时候，会跳过下一张图片BUG

4、浏览器窗口resize的时候图片出现也会加载

5、判断图片父层包裹顶部或者底部出现在可视范围内即可显示图片

我们来看看官方的介绍，我拷贝过来并且翻译了一部分：

Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.

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

Plugin is inspired by YUI ImageLoader Utility by Matt Mlinac.

延迟加载在长网页图片的延迟加载。图像窗口不加载,直到用户以外的卷轴。这是相反的图像预加载。

在长时间使用延迟加载web页面将使页面加载速度更快。在某些情况下,它也可以帮助减少服务器负载。

插件是由马特Mlinac受YUI ImageLoader效用。

For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images, load images using timeout and load images using AJAX(H).

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).

这里点有几个演示页:基本选项,与渐显效果,noscript撤退,水平滚动,水平滚动容器内,容器内垂直滚动,与无数图片页面,使用AJAX加载图像使用超时和加载图像(H)。

当检查每个请求之间的演示清除浏览器缓存。您可以检查实际装载与开发人员控制台(Safari和Chrome IE)或FireBug(Firefox)。

Lazy Load depends on Jquery. Include them both in end of your HTML code:

延迟加载取决于Jquery。包括他们在结束你的HTML代码:

<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-originalattribute. Give lazy loaded images a specific class. This way you can easily control which images plugin is binded to.

你必须改变你的图像标记。图像的地址必须放入data-original属性。给懒加载图像一个特定的类。这样你可以很容易地控制哪些图片插件绑定。

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

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

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.

默认加载图片时出现在屏幕上。如果你想要图片加载之前使用阈值参数。阈值设置为200年导致图像加载之前出现在视窗200像素。

$("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:

您可以使用jQuery点击或鼠标悬停等事件。您还可以使用定制的事件,如运动或foobar。默认是等到用户向下滚动和形象出现在视窗。加载图片只有当用户点击他们你可以:

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

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 p

默认插件等待形象完全加载和调用显示()。你可以使用任何你想要的效果。下面的代码使用渐显效果。这是演示页面。

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

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.

您还可以使用插件的图片滚动容器内部,比如div滚动条。只是通过jQuery对象的容器。有一个演示卧式锻机和垂直容器。

#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_limit setting.

滚动页面插件后循环虽然卸载图片。循环检查图片是否在可视区域。默认时停止循环以外的首家形象窗口。这是基于以下的假设。图片在页面的次序是HTML代码相同图片的顺序。与一些布局中,这样的假设是错误的。你可以控制failure_limit设置加载行为。

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

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
});