jQuery Lazy Load 图片延迟加载 插件 1.7.2
基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。
对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。
版本:
·jQuery v1.4.4+
·jQuery Lazy Load v1.7.2
注意事项:
·需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。
查看demo:http://demo.lrxin.com/2015/09/jquery.lazyload_v1.7.2_demo/
官方地址:http://www.appelsiini.net/projects/lazyload
下载地址:https://github.com/tuupola/jquery_lazyload/
下载地址2: http://pan.baidu.com/s/1o6j9DQ6
demo下载:http://pan.baidu.com/s/1i3ixY6L
js文件下载地址:http://demo.lrxin.com/2015/09/jquery.lazyload_v1.7.2_demo/jquery.lazyload.min.js
示例代码:
<!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>jQuery Lazy Load 图片延迟加载1.7.2</title> <script src="jquery.js"></script> <script src="jquery.lazyload.min.js"></script> <script> $(function(){ $('.lazy img').lazyload({ effect: 'fadeIn' }); }); </script> </head> <body> <!-- 将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片) 添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器 添加 width 和 height 属性有助于在图片未加载时占满所需要的空间 --> <div class="lazy" style="width:800px;"> <img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"> <img src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"> <img src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"> <img src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"> <img src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"> <img src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"> </div> </body> </html>
参数说明:
<script> $(function(){ $('img.lazy').lazyload({ effect:'fadeIn' , //加载使用的动画效果,如 show, fadeIn, slideDown 等 jQuery 自带的效果,或者自定义动画。Fadein 淡入动画效果 | show 直接显示 effectspeed : 800 , //动画时间。作为 effect 的参数使用:effect(effectspeed) 动画的时间为400毫秒. event:'scroll' , //绑定事件 scroll click mouseover threshold : 0, //灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示;设为整数表示图片距离 x 像素进入显示区域时进行加载;设为负数表示图片进入显示区域 x 像素时进行加载。 距离 多少像素时, 开始加载 failure_limit : 0, // 容差范围。页面滚动时,Lazy Load 会遍历延迟加载的图片,检查是否在显示区域内,默认找到第 1 张不可见的图片时,就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同,但是也可能会出现例外,通过该值来扩大容差范围。 当Lazy Load 在找到第一个未显示的 <img> 标签时,查找已经被终止了, 并没有继续往下遍历. | failure_limit : 10 这样 Lazy Load 会查找到第10个未显示的<img>标签处.当在图片多且布局复杂的页面时, failure_limit 的作用就很大了. data_attribute : "original", // skip_invisible : true, //skip_invisible 加载不可见的图片. Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化.如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false . data_attribute : 'original' , //真实图片地址的 data 属性后缀 container: $('#container') , //父容器。延迟加载父容器中的图片. 默认 window 当要延迟加载的图片全摆在一个容器中.只需把 container 属性指向摆放 img 的容器的对象. appear : null, // 图片加载时的事件 (Function),有 2 个参数:elements_left(未加载的图片数量)、settings(lazyload 的参数) load : null // 图片加载后的事件 (Function),有 2 个参数,同 appear }); }); </script>
关于 apper 和 load 两个函数的 参数 可以参考下面代码调试
<script> $(function(){ $('img').lazyload({ effect:'fadeIn' /* , appear:function(elements_left, settings) { console.log('appear'); console.log(elements_left); //console.log(this, elements_left, settings); }, load:function(elements_left, settings) { console.log('load'); console.log(elements_left); //console.log(this, elements_left, settings); } */ }); }); </script>
Load Images Using Timeout 定时加载图像
当前显示区域内的图像会进行加载,显示区域以外的图像会在延迟 5 秒之后进行加载。
<script src="/js/jquery-1.7.2.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script> $(function(){ $('img').lazyload({ effect:'fadeIn', event:'sporty' }); }); $(window).bind('load', function(){ var timeout = setTimeout(function(){ $('img').trigger('sporty') }, 5000); }); </script>
Noscript Fallback 不支持 JavaScript 时的降级示例
演示在不支持 JavaScript 的浏览器访问时,是如何运作的。参照下面的代码:
<style> .lazy { display: none; } </style> <img class="lazy" src="grey.gif" data-original="example.jpg" width="765" height="574"> <noscript><img src="example.jpg" width="765" height="574"></noscript> $('img.lazy').show().lazyload({ effect: 'fadeIn' });
.Page With Gazillion Images 大量图片的示例
当页面中存在上百张,甚至数百张图片时,建议使用 scrollstop 事件。
<script src="jquery.scrollstop.js"></script> <img src="grey.gif" data-original="example.jpg"> $('img').lazyload({ event: 'scrollstop' });
自定义 滚动停止事件 scrollstop
jquery.scrollstop.js文件下载地址 : http://demo.lrxin.com/2015/09/jquery.lazyload_v1.7.2_demo/jquery.scrollstop.js