jQuery.lazyload图片延迟加载插件
  • 分享到微信朋友圈
    X
立即下载 查看演示

为什么要图片懒加载， 当一个页面图片数量多，而且比较大，少说百来K，多则上兆的时候。 要是页面载入就一次性加载完毕。 就会非常慢。所以，我们得做点什么，避免这种糟糕的状况发生。 目前很流行的做法就是滚动动态加载， 显示屏幕之外的图片默认是不加载的，随着页面的滚动， 这个要显示图片的区域进入了浏览器可是窗口范围，则触发图片的加载显示。 这种做法的好处是，一是页面加载速度快，二是节约了流量，因为不可能每个用户浏览页面时从头滚到尾的。 jQuery.lazyload.js 可以让图片延迟加载

使用方法：

引用jquery文件和lazyload文件

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

初始化

<script>
    $("img.lazyloaded").lazyload({
        effect: "fadeIn" //淡入特效
        });
</script>

更多参数说明

  • placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏

  • effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

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

  • event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

  • container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

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