jQuery lazyload

之前网上都说JQ的lazyout不是实现真正的延迟加载,但是现在的版本貌似已经解决了这方面的问题,下面的官方的英文文档,迟点有空再翻译理解:

时隔几个月终于想把这篇东西给翻译了,为了赞点RP(-.-)

Lazy Load Plugin for jQuery

Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

Lazy Load是一个用JavaScript写得jQuery插件,它可以让图片在一个很长的网页中延迟加载,那些在我们视线之外的在我们没有滚动到的时候是不会加载的,这根 image preloading是完全相反的.

Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Lazy Load这个插件使得在一个包含很多大图片的长网页更快的加载,在加载 完可见的图片浏览器会在一个准备的状态,在某些情况下,它可以帮助减轻服务器的加载

Lazy Load is inspired by YUI ImageLoader Utility by Matt Mlinac.

Lazy Load是受到YUI ImageLoader实用的启发

For those in hurry there are several demo pages available: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images and load images using timeout.
下面有很多的例子:基本操作,有渐变效果,在没有javascript效果的浏览器上(好像,英语不好),打横加载,横滚动条在一个容器之内,竖滚动条在一个容器之内,页面包含很多小图片,使用有限时间加载图片
When checking the demos clear browser cache between each request. You can check what is actually loaded with developers console (Chrome and Safari), FireBug (Firefox) or HTTPHeaders (IE).

在查看每一个Demo的时候要吧浏览器的缓存给清除,你可以看看在不同的浏览器下的加载是怎么样的

How to use?

如何使用

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

Lazy Load依靠于JQ,所以在HTML的代码里面加入

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

You must alter your HTML code. Put the place holder image into src attribute. Demo pages use 1×1 pixel grey gif. URL of the real image must be put into data-original attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to.

你必须修改你的那个图片的HTML代码,增加一个src的属性,Demo的页面使用一个1*1相熟的灰色gif照片,图片真正的URL不许放到data-original的这个属性里面,给延迟加载图片一个特别的class是一个很好的想法,通过这样的方法,你可以更简单地去控制有这个class的图片把延迟加载的这个插件绑定上去

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

then in your code do:

然后再你代码需要做的是:

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

This causes all images of class lazy to be lazy loaded. See the basic options demo.

这样会造成所有class=lazy的图片添加延迟加载.可以看看 基本操作的这个demo

Fallback for non JavaScript browsers

对于没有JavaScript的浏览器

Practically everyone has JavaScript enabled. However there are cases when you want to show the real images even if request come from client which does not support JavaScript. Google crawlers are one good candidate. To degrade gracefully when JavaScript is not enabled you can include the real image tag inside <noscript> block.

对于所有有JavaScript功能的浏览器可以,然而那些你想给那些不支持JavaScript 的客户端展示真正图片的情况呢?Google crawlers是一个很好的后备者,当JavaScrip不能使用的时候你可以在<noscript>标签里面包含真正的图片

<imgclass="lazy" src="img/grey.gif" 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 place holder with css.

为了防止占位符和真正的图片在同一时间出现,用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.

对于支持JavaScript的浏览器,你必须在documents加载的时候吧占位符给展示出来,这个可以在初始化插件的时候一起完成

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

All this is optional can should be done only if you want the plugin to degrade gracefully.

 

Setting sensitivity

设置清晰度

By default images are loaded when they appear on the screen. If you want images to load earlier you can set threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it is visible.

当默认图片出现在屏幕上的时候被加载,如果你希望图片在更早加载,你可以设置threshold,设置threshold200可以使图片在可以见到之前先加载200像素

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

Event to trigger loading

触发loading的事件

Event can be any jQuery event such as click or mouseover. You can also use your own custom events such as sporty or foobar. Default is to wait until user scrolls down and image appears on the window. To prevent all images to load until their placeholder image is clicked you could do:

事件可以是任何的JQ时间例如click或者是mouseover,你也可以使用你自己定制的事件例如sporty或者foobar.默认的事件是使用者滚动到图片出现在窗口,为了防止所有的图片在点击占位符之间加载你可以这样做:


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

Using effects

使用效果

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

默认地插件等待图片完全加载以及用show函数去展示它,你可以使用一些你希望的效果.下面的代码使用fadeIn效果,你可以通过effect demo page这个demo看看效果

$("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 horizontal and vertical container.

你也可以在图片在容器内滚动使用插件,例如一个包含滚动条的div.这里有滚动条打横  horizontal 和打竖 vertical 的容器的例子

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

$("img.lazy").lazyload({         
     container: $("#container")});

When images are not sequential

当图片不是连续的时候

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) 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 failurelimit option.

在滚动页面的时候Lazy Load是没有加载的图片承欢,在循环中它检查图片是否可见,默认的循环是在第一个不可以见的图片被检测到为止.这依赖于下面的一些设想.图片在页面的顺序以及在HTML代码中的顺序是一样的.在一些布局的假设里面这也许是错误的.你可以通过failurelimit这个操作控制加载这个动作

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

Setting failurelimit 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.

设置failurelimit变成10好使插件在在折叠的情况下找到10张图片的时候停止搜索

Delayed loading of images.

延迟图片的加载

Not exactly feature of Lazy Load but it is also possible to delay loading of images. Following code waits for page to finish loading (not only HTML but also any visible images). Five seconds after page is finished, below the fold images are loaded automatically. You can also check the delayed loading demo.

不是Lazy Load真正起作用而是也可能延迟图片的加载(这里不会翻译了~.~).下面的代码等待页面完成加载(包括HTML和可见的图片).在页面完成的5秒钟后.下面折叠的图片会自动加载.你可以查看这个例子delayed loading demo

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

Download

下载

Latest source or minified. Plugin has been tested with Safari 5.1, Firefox 3.6, Firefox 7.0, Firefox 8.0 on OSX and Firefox 3.0, Chrome 14 and IE 8 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad.

最新的源代码或者是压缩代码source or minified.插件在Windows上的Safari 5.1, Firefox 3.6, Firefox 7.0, Firefox 8.0 on OSX and Firefox 3.0, Chrome 14 and IE 8这些浏览器以及在 iPhone and iPad 是用Safari 5.1 on iOS 5也测试过了

When asking a question please include an URL to example page where the problem occurs. If you have longer code examples please use pastie.org

在提问的时候请包含问题出现的页面的例子的URL.如果你有一个更长的代码例子请用pastie.org

 

上面的翻译是自己翻译的,而且自己的英文水平不是很好,希望各位多多见谅,有什么错误希望可以及时指出

转载于:https://www.cnblogs.com/jeanlyn/archive/2011/12/05/2277335.html