jQuery Lazy Load 图片延迟加载 插件 1.7.2

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

发表评论

邮箱地址不会被公开。 必填项已用*标注