Lazyload
一个jQuery或zepto的图片延迟加载插件。An jQuery | zepto plugin for lazy loading images.
Install / Use
/learn @jieyou/LazyloadREADME
h1. 中文
"for English please click":#english
h2. 基于jQuery或Zepto的图片延迟加载插件
该插件在较长的页面中延迟加载图片。视窗外的图片会延迟加载，直到它们由于用户滚动而出现到视窗中。可以将它看做图像预加载技术的反向运用。
在包含很多大图片且较长页面中使用延迟加载，能使页面载入更快。浏览器在只加载可见区域的图片后就达到绪状态。在某些情况下，它也能帮助减少服务器端的负载。
图片延迟加载的灵感来自于Matt Mlinac的 "YUI ImageLoader":http://developer.yahoo.com/yui/imageloader/ 技术。
这个项目由 "tuupola/jquery_lazyload":https://github.com/tuupola/jquery_lazyload fork而来，并加入了如下功能：
- 修改了许多细节来提升性能;
- 加入了对IE6/7的支持;
- 可以在图片加载之前再根据需求动态修改图片的url;
- 可以基于 "Zepto":https://github.com/madrobby/zepto 使用，而不是只能基于jQuery;
vertical_only、no_fake_img_loader、check_appear_throttle_time等额外的选项。
h2. 如何使用?
h3. Basic
图片延迟加载插件基于jQuery或Zepto，在你HTML代码的尾部引入他们：
<pre><script src="jQuery.js"></script> <!-- 或 <script src="zepto.js"> --> <script src="lazyload.min.js"></script></pre>或者用 Bower (http://bower.io/) 安装：
<pre> bower install jieyou_lazyload </pre>你必须改写你的HTML代码。真实图像的URL必须被放入到data-original属性中。给所有需要延迟加载图片一个特殊的class是一个好主意。这样你就可以很容易地控制哪些图片会被插件绑定到。请注意，你的图片应该有宽度和高度属性，或者通过CSS来控制图片的宽度和高度，或者通过某些手段来确保它有正确的宽度和宽度。
<img class="lazy" data-original="img/example.jpg">
<!-- 或：自适应宽度的图片样式（常用于移动端） -->
<style>
.lazy{width:100%;height:0;padding-top:75%;background-size:100%;}
/* 假设高宽比为 480:640，即75%，并使用背景图的方式将图片铺在padding-top区域内
（padding的百分比是宽度的百分比而不是高度的，即使是padding-top|padding-bottom） */
</style>
<div class="lazy" data-original="img/example.jpg"><div>
<!-- 请参阅examples/enabled_image_full_width.html -->
然后你在你的代码中加入:
<pre>$(".lazy").lazyload();</pre>这会使得所有class为lazy的元素被延迟加载
h3. 高级
h4. 在AJAX加载的内容中使用
<pre><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre> <pre> $("#container").one("click", function() { $("#container").load("images.html", function(response, status, xhr) { $("img.lazy").lazyload(); }); }); </pre>请参阅 enabled_ajax.html
h4. 与css背景图一起使用
<pre><div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div></pre> <pre> $("div.lazy").lazyload(); // 或加入某些效果 $("div.lazy").lazyload({ effect : "fadeIn" }); </pre>请参阅 enabled_background.html
h4. 图片在某个容器中滚动
<pre><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre> <pre> #container { height: 600px; overflow: scroll; } </pre> <pre> $("img.lazy").lazyload({ effect : "fadeIn", container: $("#container") }); </pre>请参阅 enabled_container.html
h4. 在scrollstop(或其他自定义事件)时判断是否应该加载图片
请参阅 enabled_gazillion.php
h4. 图片在某个容器中的水平方向滚动
<pre><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre> <pre> #container { width: 800px; overflow: scroll; } #inner_container { width: 4750px; } </pre> <pre> $("img.lazy").lazyload({ container: $("#container") }); </pre>请参阅 enabled_wide_container.html
h4. 加入fadeIn效果
<pre><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre> <pre> $("img.lazy").lazyload({ effect : "fadeIn" }); </pre>请参阅 enabled_fadein.html
h4. 在5秒延迟后加载图片
<pre><img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574"></pre> <pre> $(function() { $("img.lazy").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000); }); </pre>请参阅 enabled_timeout.html
h4. 在水平方向很宽的页面中使用
<pre><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre> <pre> $("img.lazy").lazyload(); </pre>请参阅 enabled_wide.html
h4. 在只能在竖直方向滚动的页面中使用
<pre><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre> <pre> $("img.lazy").lazyload({ vertical_only: true }); </pre>请参阅 enabled_vertical_only.html
h4. 重写图片的原始url
某些情况下，你需要对图片的原始url做一些处理
<pre><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574"></pre> <pre> $("img.lazy").lazyload({ url_rewriter_fn:function($element,originalSrcInAttr){ // this -> image element if(originalSrcInAttr == 'img/bmw_m1_hood.jpg'){ // in the example, we changed the first image's url to another return 'img/bmw_m1_hood_rewritten.jpg' } return originalSrcInAttr } }) // 回调函数中，`this`指向出现的图片元素的节点，参数第一项为当前元素的jQuery|Zepto对象，第二项为当前元素的图片的原始url </pre>h4. 不使用假图片预加载
默认情况下，我们在加载图片时，会先创建一个 Image 对象（fake image）将远端的图片加载到本地，再更改真正需要此图片的元素的 src 或 background-image 属性。这样用户看上去图片不是被缓慢加载出来的，而是在立即展现，或能添加诸如 fadeIn 类的效果。
但是如果图片是从某个接口动态返回的，而不是实际的一个静态文件，上述机制在某些情况下可能导致图片被加载两次（创建的Image对象会加载一次，实际DOM树中的元素设置 src 或 background-image 时又会加载一次），此时你可以将 no_fake_img_loader 参数设置为true，这样不会有 fake image 的机制，从而规避这种问题。
请注意 "与srcset属性一起使用":#%E4%B8%8Esrcset%E5%B1%9E%E6%80%A7%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8 时，则一定会开启“不使用假图片预加载”，而无论你设置的no_fake_img_loader的值是true还是false。
<pre><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574"></pre> <pre> $("img.lazy").lazyload({ no_fake_img_loader:true }) </pre>请参阅 enabled_no_fake_img_loader.html
h4. 与AMD模块加载器（如requirejs）一起使用
<pre><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574"></pre> <pre> require(['jquery','../lazyload'],function($){ $(".lazy").lazyload() }) </pre>请参阅 enabled_amd.html
h4. 与srcset属性一起使用
更多详情请见 enabled_srcset.html
请参阅 enabled_srcset.html
h4. options对象
你可以将options对象当做lazyload方法的第一个参数来使用。
h4. 移除skip_invisible属性
由于display:none时，jQuery/Zepto中的$(selector).offset().top/left属性始终为0( "链接":http://bugs.jquery.com/ticket/3037 )，因此该属性为false并且图片一开始display:none时，由于无法得到该标签距离文档顶部的实际像素数，图片在一开始就会被加载上来，违背了lazyload的初衷。因此该版本中删掉了该属性。lazyload不会去管display:none的图片，可能会出现当将display:none改变为其它值，图片仍然没有被加载的情况，但是只要滑动
