JavaScript——延迟加载技术

JavaScript——延迟加载技术

文章分类:Web前端

       自从接触电脑开始，就迷恋了两部动漫，火影和死神，记得以前看的时候，要等图片完全加载完成才能看到，最近半年的时间，发现打开漫画的速度是越来越快了，加载的方式也发生了一些变化。

        查了一下，才知道他们使用了一种新的加载技术——图片延迟加载技术，那么什么才是图片延迟加载技术（ImageLazyLoad）呢？

        在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可是界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。

        眼下网上使用此技术的网站有太多太多，如淘宝，还有一些动漫网站，他们都使用了这种技术。

        眼下比较常用的图片延迟加载技术有四种：kissy(淘宝的JS框架),Jquery 图片延迟插件，Prototype，YUI 2。

        抽时间去网上查查了，YUI的图片延迟技术是就成熟的，Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术（Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac），闲话不说，一起来看看如何使用。

1.导入JS插件

<script src="jquery.js" type="text/javascript"></script>  
<script src="jquery.lazyload.js" type="text/javascript"></script>

 

2.在你的页面中加入如下的javascript： 

$("img").lazyload();  

这将会使所有的图片都延迟加载。 

当然插件还有几个配置项可供设置。

 1.改变threshold

 $(“img”).lazyload({ threshold : 200 });

 把阀值设置成200 意思就是当图片没有看到之前先load 200像素。

 2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload({  
    placeholder : "img/grey.gif",  
    event : "click" 
});

3.可以通过定义effect 参数来定义一些图片显示效果

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

 LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致；

但做为技术而言没有十全十美的技术，缺点也是有的：

1.与Ajax技术的冲突；

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

3.写代码不规范的朋友要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用ImageLazyLoad。