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实现漂亮的动态信息提示效果
Aug 02 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
vue+elementUI实现图片上传功能
Aug 20 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
php 缩略图实现函数代码
2011/06/23 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
jQuery示例收集
2010/11/05 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
政治思想表现评语
2014/05/04 职场文书
维修工先进事迹
2014/05/29 职场文书
学习十八大的心得体会
2014/09/12 职场文书
个人违纪检讨书
2014/09/15 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
2015年父亲节寄语
2015/03/23 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
中学教代会开幕词
2016/03/04 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript
vue中data里面的数据相互使用方式
2022/06/05 Vue.js
windows系统搭建WEB服务器详细教程
2022/08/05 Servers