Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

Demo页面:

基本选项

淡入效果

对不支持JavaScript浏览器的降级处理

水平滚动

容器内水平滚动

容器内垂直滚动

页面内存在N多图片

经过五秒钟的延迟后加载图片

用AJAX来加载图片

如何使用

Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾，也就是</body>前:

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

你必须改变图片的标签。图像的地址必须放在data-original属性上。给懒加载图像一个特定的class（例如:lazy）。这样你可以很容易地进行图像插件捆绑。代码如下：

1
<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
1
2
3
$(function() {
    $("img.lazy").lazyload();
});

这将使所有 class 为 lazy 的图片将被延迟加载.
Demo:基本选项

TIPS:这里必须设置图片的width和height,否则插件可能无法正常工作。

设置临界点

默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.

1
2
3
$("img.lazy").lazyload({
    threshold : 200
});

设置事件来触发加载

你可以使用jQuery事件，例如click和mouseover。也可以使用自定义事件，如sporty、foobar默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片：

1
2
3
$("img.lazy").lazyload({
    event : "click"
});

Demo:经过五秒钟的延迟后加载图片

使用特效

默认情况下，插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn （淡入效果）。
Demo:淡入效果

1
2
3
$("img.lazy").lazyload({
    effect : "fadeIn"
});

针对不启用JavaScript的情况

几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 <noscript> 标签内.

1
2
<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

可以通过 CSS 隐藏占位符.

1
2
3
.lazy {
    display: none;
}

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.

1
$("img.lazy").show().lazyload();

图片在容器里面

你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.
Demo:容器内水平滚动, 容器内垂直滚动

当图像不连续时

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

1
2
3
$("img.lazy").lazyload({
    failure_limit : 10
});

将 failurelimit 设为 10 ，令插件找到 10 个不在可见区域的图片时才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.

加载隐藏的图片

可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false

1
2
3
$("img.lazy").lazyload({
    skip_invisible : false
});

下载插件

最新版本 源代码和压缩代码. 插件已经在 OSX 的 Safari 5.1, Safari 6, Chrome 20, Firefox 12 浏览器上, Windows 的 Chrome 20, IE 8 and IE 9 浏览器上, 以及 iOS5 (iPhone 和 iPad) 的 Safari 5.1 浏览器上测试过.

jQuery lazyload 懒加载的更多相关文章

  1. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  2. lazyload懒加载的使用

    1.引用<script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?2 ...

  3. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

    引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...

  4. jQuery图片懒加载lazyload插件

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ js 模板引擎

  5. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  6. Android--Fragment的懒加载

    我们都知道,fragment放在viewPager里面,viewpager会帮我们预先加载一个,但是当我们要看fragment里面的内容时,我们也许只会去看第一个,不会去看第二个,如果这时候不去实现f ...

  7. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. jquery懒加载jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

随机推荐

  1. JAVAWEB项目实现验证码中文、英文、数字组合

    验证码基础 一.什么是验证码及它的作用 :验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计算机的公共全自动程序,这个问题可以由计算机生成并评判,但是必须只有人类才能解答.可以防止恶意 ...

  2. JVM之SerialOld收集器

    Serial收集器的老年代版本 单线程收集器 标记-整理算法 stop the world Client模式下的虚拟机使用 Server模式下,搭配Parallel Scavenge使用及CMS发生C ...

  3. mongodb的查询语句学习摘要

    看了些资料,对应只需要知道怎么查询和使用mongodb的我来说,这些足够啦. 左边是mongodb查询语句,右边是sql语句.对照着用,挺方便. db.users.find() select * fr ...

  4. 基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作

    在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...

  5. sdutoj 2623 The number of steps

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2623 The number of steps ...

  6. html中input文本框，初始里边有文字提示，当点击时，文字消失，怎么设置？

    使用onfocus事件检查当前值,如果是默认值,就将value属性置空.如:<input type="text" value="请输入内容" onfocu ...

  7. XidianOJ 1112 Too stupid

    题目描述 某天 light由于太富而且太帅遭到了歹徒的袭击,现在他遇到了n个歹徒,准备对light施行不法行为,虽然light身体强壮,但是毕竟只有一个人肯定打不过那么多歹徒,但是高智商的light觉 ...

  8. 人工智能范畴及深度学习主流框架，IBM Watson认知计算领域IntelligentBehavior介绍

    人工智能范畴及深度学习主流框架,IBM Watson认知计算领域IntelligentBehavior介绍 工业机器人,家用机器人这些只是人工智能的一个细分应用而已.图像识别,语音识别,推荐算法,NL ...

  9. 【转】svn服务器IP修改后,本地怎么跟新svn同步,svn relocate 操作

    本文来源:http://www.kukaka.org/home/showonews/444 1.进入工作复本 cd ~/test 2.查看仓库地址(URL) svn info 路径: .    URL ...

  10. 【Python】网络编程

    1.TCP编程 2.SocketServer模块 3.Twisted框架 4.UDP编程 1.TCP编程--TCP是面向连接的,其一般的设计如下: # encoding:utf-8 ''' Creat ...