欧阳泽 发表于 2013-1-22 22:46:28

jquery——延迟加载技术

<span style="font-family: Arial, sans-serif, Helvetica, Tahoma; line-height: 18px;">     自从接触电脑开始,就迷恋了两部动漫,火影和死神,记得以前看的时候,要等图片完全加载完成才能看到,最近半年的时间,发现打开漫画的速度是越来越快了,加载的方式也发生了一些变化。
        查了一下,才知道他们使用了一种新的加载技术——图片延迟加载技术,那么什么才是图片延迟加载技术(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>
<div class="line alt2">
页: [1]
查看完整版本: jquery——延迟加载技术