jQuery插件:Image lazy loader图片耽误加载
|
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以耽误加载长页面中的图片. 在赏识器可视地区外的图片不会被载入, 直到用户将页面转动到它们地址的位置. 这与图片预加载的处理赏罚方法正好是相反的. 在包括许多大图片长页面中耽误加载图片可以加速页面加载速率. 赏识器将会在加载可见图片之后即进入停当状态. 在某些环境下还可以辅佐低落处事器承担. Lazy Load 灵感来自 Matt Mlinac 建造的 YUI ImageLoader 器材箱. 这是演示页面. 奈何行使?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 地点. 透明, 灰色和白色的 1×1 象素的图片已经包括在插件内里. $("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 { JavaScript 代码: $("img").lazyload({ 当图片不次序分列转动页面的时辰, Lazy Load 会轮回为加载的图片. 在轮回中检测图片是否在可视地区内. 默认环境下在找到第一张不在可见地区的图片时遏制轮回. 图片被以为是流式漫衍的, 图片在页面中的序次和 HTML 代码中序次沟通. 可是在一些机关中, 这样的假设是不创立的. 不外你可以通过 failurelimit 选项来节制加载举动. $("img").lazyload({ 将 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 插件. 这时一个相等有数的题目, 假若有人找到办理步伐请接洽作者. 本文由：cnfi`s Blog 翻译自：http://www.appelsiini.net/projects/lazyload （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
