Lazy Load 延迟加载图片的 jQuery 插件


Posted in Javascript onFebruary 06, 2010

怎样使用?
Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:

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

并且在你的执行代码中加入下面语句:
     
$("http://www.appelsiini.net/projects/lazyload/img").lazyload();

这将使 id="http://www.appelsiini.net/projects/lazyload/img" 区域下的图片将被延迟加载.
设置敏感度
插件提供了 threshold 选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).
     
$("http://www.appelsiini.net/projects/lazyload/img").lazyload({ threshold : 200 });

将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片. (这一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.)
占位图片
你还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1x1 象素的图片已经包含在插件里面.
     
$("img").lazyload({ placeholder : "img/grey.gif" });

事件触发加载
事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
$("img").lazyload({ 
    placeholder : "img/grey.gif", 
    event : "click" 
});

使用特效
当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果. 这是演示页面.
$("img").lazyload({ 
    placeholder : "img/grey.gif", 
    effect : "fadeIn" 
});

图片在容器里面
你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面. 这是水平滚动演示页面和垂直滚动的演示页面.
CSS 代码:
#container { 
    height: 600px; 
    overflow: scroll; 
}

JavaScript 代码:
$("img").lazyload({ 
     placeholder : "img/grey.gif", 
     container: $("#container") 
});

当图片不顺序排列
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.
     
$("img").lazyload({ 
    failurelimit : 10 
});

将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.
延迟加载图片
Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载. 这是延迟加载演示页面.
$(function() { 
    $("img:below-the-fold").lazyload({ 
        placeholder : "img/grey.gif", 
        event : "sporty" 
    }); 
}); 
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000); 
});

下载插件
最新版本: 源代码, 压缩的代码, 打包的代码
已知问题
由于 webkit 的 bug #6656, Lazy Load 在 Safari 和 Chrome 中无法使用. 它会立即为你加载所有你愿意和不愿意被载入的图片.
貌似 jQuery 1.3.x 令插件在 IE 中失效了. 所有图片将在后台被加载即使它们不应该被加载. 作者正在为解决这个问题而努力, 在此期间只能停留在 jQuery 1.2.6 中使用该插件.
还有, 如果你使用 Mint, 请将 mint 标签加在页面头部, 如果把 mint 标签加到页面结尾会干扰到 Lazy Load 插件. 这是一个相当罕见的问题, 如果有人找到解决办法请联系作者.
Javascript 相关文章推荐
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 #Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 #Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 #Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 #Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 #Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 #Javascript
javascript两段代码,两个小技巧
Feb 04 #Javascript
You might like
关于crontab的使用详解
2013/06/24 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
js中作用域的实例解析
2017/03/16 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
python使用matplotlib绘制折线图教程
2017/02/08 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
拔河比赛口号
2014/06/10 职场文书
雷锋的故事观后感
2015/06/10 职场文书
三好学生竞选稿
2015/11/21 职场文书
初中政治教师教学反思
2016/02/23 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技