20-Jquery延时加载图片学习

• 什么是JQueryLazyLoad?

        官方网站地址：http://www.appelsiini.net/projects/lazyload

      软件下载地址：http://plugins.jquery.com/lazyload/

Lazy load 是用于长网页的图片延迟加载，在视线内的图片会被加载，不在视线内的，向下滚动鼠标才会加载。

使用Lazy load在长网页上面可以使页面加载更加快速，会减少服务器负载。

• 如何使用Lazy load?
  

  
  

1.引入js包，Lazy load 依赖JQuery（jquery >=1.5），引入JQuery在HTML标签最后，放到</body>之前即可。

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

2.必须修改img标签，图片地址必须用data-original属性，给img标签加个特殊的class属性，例如：class="lazy",这样会更方便的控制绑定的图片。

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

$(function() {
    $("img.lazy").lazyload();
});

3.小贴士，必须给img加上width和height属性，否则不能正常运行。

4.设置阈值

默认图片加载到屏幕上面的时候，如果你想更早的加载下面的图片，使用threshold属性，当离出现到屏幕还有200像素的时候就会加载。

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

5.使用效果（淡入）

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

6.添加默认加载图片

$("img.lazy").lazyload({
    placeholder : "images/pre.gif"
});

• 小贴士

   测试的时候，清空缓存（历史记录）。   

• 缺陷

       1.与Ajax技术的冲突； 

 2.图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；

 3.img标签的height属性未定义，加载失败

百度云实例下载地址：http://pan.baidu.com/s/1jIpliHC