JQuery缓冲加载图片插件lazyload.js的使用方法

 

 lazyload.js是一个基于JQuery的插件，能够用来缓冲加载图片。若是一个网页很长而且有不少图片的话，下载图片就须要不少时间，那么就会影响整个网页的加载速度，而这款延迟加载插件，会经过你的滚动状况来加载你须要看的图片，而后它才会从后台请求下载图片，最后显示出来。经过这个插件，能够在须要显示图片的时候，才下载图片，从而能够减小服务器的压力，提升页面加载速度。

Lazy Load 插件原理

修改目标img元素的src属性为orginal属性，从而中断图片的加载。检测滚动状态，而后把网页可视区域中的img的src属性还原而后加载图片，从而制造了一种缓冲加载的效果。代码引入方法：

1 2 3 4 5 6 7 8 9 10 11

<script type= "text/javascript"  src= "js/jquery-1.8.3.min.js" ></script> <script type= "text/javascript"  src= "js/jquery.lazyload.js" ></script> <script type= "text/javascript" >      $(document).ready(      function ($){      $( "img" ).lazyload({           placeholder : "images/grey.gif" , //加载图片前的占位图片           effect      : "fadeIn"  //加载图片使用的效果(淡入)      });      }); </script>

可是如今，不少Javascript大牛分析得出，这个插件其实并无真正的起到缓加载的做用。确实是这样，官方也已经给出了说明和解决方法了。

其实缘由就在于在新版的浏览器中，即便咱们删除了Javascript控制的src属性，浏览器仍然会去加载这个图像。

那么咱们该怎么解决呢？其实也很简单，须要直接修改HTML的结构，在img标签中添加新的属性，把src属性的值指向占位图片，添加data-original属性，让其指向真正的图像地址。好比：

1	< img  src = "img/grey.gif"  data-original = "img/example.jpg"  >

固然，在上面的代码中咱们把页面内的全部图片都延迟加载了，但有些时候咱们并不但愿这样，由于有些图片并不想然他们延迟加载，那么咱们能够这样只需作：

如只缓冲加载类main下的图像

 

1 2 3 4

$( ".main img" ).lazyload({       placeholder : "images/grey.gif" ,       effect      : "fadeIn" });

加载挂载有lazy类的图像：

1 2 3 4

$( "img.lazy" ).lazyload({       placeholder : "images/grey.gif" ,       effect      : "fadeIn" });

其余的以此类推，适当作一下选择器调整就好了。

lazyload.js 高级使用方法：

下面部分来自官方文档，将官方文档进行了一下简单的翻译。

 

更周全的作法

咱们不得不思考这样一个问题。咱们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。若是用户的浏览器不支持或者用户关掉了支持 Javascript 的选项，那么咱们的这个图像就没法显示出来。也就是说，若是没有 Javascript 的支持，咱们的图像就没法显示出来。

应对这个问题，咱们须要引入noscript 标签。大致思路以下：用 noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。

1 2	<img class= "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>

对现有图像，隐藏处理，使用 show()方法触发显示。

1 2 3

.lazy {    display : none ; }

这样，若是浏览器不支持 Javascript，咱们自定义的 img 就不会出现，而显示 noscript 里面的图像。具体实现代码以下：

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

提早加载

默认的状况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，而后再缓慢出现。若是你想在用户滚动以前，提早加载这个图像，你能够配置一下参数。

1 2 3

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

threshold 这个参数，就是用来提早加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。

自定义触发事件

默认的触发事件，是滚动，当你滚动的时候，就会检查而后加载。你可使用event属性，设置你本身的加载事件，以后你能够自定义触发这个事件的条件，而后去加载图像。

 

1 2 3

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

自定义显示效果

默认的图片实现效果，就是没有效果，下载完成以后，直接显示出来。这样的用户体验并很差，你能够设置effect属性，来控制显示图片的效果。例如

1 2 3

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

fadeIn的效果就是，改变图片的透明度，渐现的方式出现。

把图像插入某个容器

你们若是使用智能手机的话，常常去应用网站下载应用，他们一般使用一个横着的容器，放一些手机截图。使用container属性，能很轻松在容器中实现缓冲加载。首先，咱们须要用css定义这个容器，而后用这个插件进行加载。

1 2 3 4

#container { height: 600px; overflow: scroll; } $( "img.lazy" ).lazyload({      container: $( "#container" ) });

加载不可见图像

有部分图像是不可见的，咱们对其加上相似 display:none;等属性的图像。默认的状况下，这个插件是不会加载隐藏的不可见图像。若是咱们须要用它加载不可见图像，咱们须要将 skip_invisible设置为false，代码以下：

1 2 3

$( "img.lazy" ).lazyload({      skip_invisible : false });

好了，这就是lazyload.js这款插件的简单介绍了，下面有个Demo，你们能够参考下。