Jquery插件lazyload的使用和参数说明

Jquery插件lazyload可以实现图片的延迟加载，当网页的滚动条滑动到了图片的位置时，图片才开始加载，加载时我们可以设计淡入的效果。不仅减少了网页刚打开时的加载内容，同时呈现给用户的还是一个很炫的效果。

记得我前不久尝试着用Jquery的lazyload插件来实现网页图片的延迟加载，但是失败了。因为没有看明白网上的相关文章。今天我又尝试了下，这次实现了。不知道是我最近在温习Jquery还是什么原因哈，这次很轻松的实现了。感到高兴之时将我的喜悦也来分享给大家。大家在做图片网站或者网站的图片较多的话可以考虑Jquery的插件lazyload。

第一步：下载Jquery和插件Jquery.lazyload.js文件

这二个文件你到百度或者google上搜索都可以下载到的。要不我提供给大家下载地址吧！
Jquery下载地址：www.skycn.com/soft/65103.html
Jquery.lazyload.js下载地址：www.jb51.net/article/26528.htm
上面这二个下载地址只是很多地址中的一个，要是不能下载了大家再找找别的网站下载吧！一般提供下载Jquery.lazyload.js的都有预加载的图片打包在一起的。

第二步：建立HTML文件
下面是我写的一个测试的HTML文件



Jquery Lazy_load 插件实现图片加载

在浏览器中查看一下效果就出来了。呵呵，很神奇吧！再说说Jquery.lazyload.js的参数，想得到适合自己的效果你可以挨个测试。
1、图片的提前占位
placehoder:"./images/grey.gif"
参数：placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏

2、图片载入时的效果
effect:"fadeIn"
参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

3、图片提前开始加载
threshold:200
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

4、当事件触发时才加载
event:"click"
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

5、对容器中的图片实现效果
container:$("#container")
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

6、图片排序混乱时
failurelimit:10
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.

总结：建议大家每个参数都测试一下，看看效果，加深对Jquery的lazyload插件的理解。

猜你喜欢