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:这里必须设置图片的widthheight,否则插件可能无法正常工作。

设置临界点

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

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

设置事件来触发加载

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

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 浏览器上测试过.

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » jQuery延迟加载(懒加载)插件 – jquery.lazyload.js


https://github.com/tuupola/jquery_lazyload/ 官网

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路的更多相关文章

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

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

  2. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  3. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

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

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

  5. jQuery懒加载插件 – jquery.lazyload.js简单调用

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

  6. jQuery懒加载插件 – jquery.lazyload.js

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

  7. Vue图片懒加载插件 - vue lazyload的简单使用

    Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...

  8. JS怎样实现图片的懒加载以及jquery.lazyload.js的使用

    在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...

  9. 图片懒加载插件lazyload使用方法

    图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...

随机推荐

  1. Grunt使用心得

    1.安装npm 2.安装CLI ( npm install -g grunt-cli) 3.安装grunt (npm install grunt --save-dev) 4.添加gruntfile.j ...

  2. 文成小盆友python-num9 socket编程

    socket编程 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket的英文原义是“孔”或“插座”.作为BSD UNIX的进程通信机制,取后一种意思 ...

  3. Python函数小结(1)--参数类型(*, ** 的区别), 闭包

    刚开始学习python,python相对于java确实要简洁易用得多.内存回收类似hotspot的可达性分析, 不可变对象也如同java得Integer类型,with函数类似新版本C++的特性,总体来 ...

  4. mac下 配置tomcat

    第一步: 1.打开你的终端:然后输入  pico .bash_profile   回车 第二步: 2. 然后添加你tomcat放入的路径的path 编辑完后,control+x   (保存)    继 ...

  5. 什么是SPI通信?

    SPI:高速同步串行口.3-4线接口,收发独立.可同步进行. SPI,是英语Serial Peripheral interface的缩写,顾名思义就是串行外围设备接口.是Motorola首先在其MC6 ...

  6. shell编程技术之-基础知识

    一.脚本结构 linux下shell的脚本,是将一系列命令序列写在一个文本文件,而这个文本文件时可执行的.相对命令行来说,开发效率提高.因此他的构架有2部分构成#!和命令序列.其中#!指明此脚本是用哪 ...

  7. javascript 事件触发

    http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/ htt ...

  8. Ruby的语法糖

    发现Ruby的语法糖好多,比如函数调用,参数列表可以写括号和不写括号.代码块可以用do end 或者 {}.   还有 if,unless后置.等等. 如果看Ruby代码看多了,你会发现,它很多地方的 ...

  9. baike并行计算概念

    并行计算 概论 ▪ 高性能计算 ▪ 计算机集群 ▪ 分布式计算 ▪ 网格计算 ▪ 云端运算         方式 ▪ Bit-level parallelism ▪ Instruction level ...

  10. Linux企业级项目实践之网络爬虫(21)——扩展为多任务爬虫

    高效的网络爬虫是搜索引擎的重要基础.采用多任务并发执行,实现类似于CPU的流水线(pipeline)运行方式,可极大地提高网络和计算资源的利用率等性能. #include "threads. ...