jquery-懒加载技术(简称lazyload)

第一：lazyLoad简介及做用：

网站性能优化的插件，提升用户体验。

页面若是有不少图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。

第二：使用场合

　涉及到图片，falsh资源，iframe，网页编辑器(CK)，JS文件 等占用较大带宽，避免网页打开时加载过多资源，让用户等待过久。

第三：代码使用

1.导入JS插件(前提有 1.6.2.js文件)

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

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

<script type="text/javascript"> 
    $("img").lazyload();  
</script> 

因此图片都延迟加载。

3.设置敏感度区域

插件提供了 threshold 选项

$("#xd").lazyload({ threshold : 200 })

将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片. (这一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

参数:threshold,值为数字,表明页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,能够作到不让用户察觉.

4. 还有涉及到 高级应用，触发事件，多参数等等。详细见参考 url

参考：

加载 图片 ：http://www.cnblogs.com/szytwo/archive/2012/12/27/2836141.html

加载 js 文件：

 

 

5.使用jQuery.Lazyload延迟加载图片后 在img标签会多加一条属性data-original="图片地址"（data-original能够自定义）个人问题是成功加载图片后，如何自动移除这条自定义的属性。

------解决方案--------------------
能够修改lazyload插件，在加载完毕每张图片执行还原原图片后移除data-original属性

JScript code

$(this).removeAttr('data-original');