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

一.使用方法

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

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

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

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

这将使所有 class 为 lazy 的图片将被延迟加载.

设置临界点

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

$("img.lazy").lazyload({
threshold : 200
})

设置事件来触发加载

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

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

使用特效

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

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

插件下载:http://www.w3cways.com/tag/jquery-lazyload-js

jquery懒加载jquery.lazyload.js的更多相关文章

  1. 图片懒加载插件lazyload.js详解

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 图片懒加载之lazyload.js插件使用

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...

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

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

  4. ajax-json,遇到的一个问题,jquery var ,加载顺序。JS对象,json格式转换。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

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

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

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

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

  8. jQuery懒加载插件

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

  9. 懒加载 jquery代码

    懒加载代码.据说这是jquery代码. 说白了就是在 开始的时候调用,这个和C#代码错误处理机制是一样的. function check() {          var obj = document ...

随机推荐

  1. 【转】详解Java正则表达式语法

    (转自: http://www.jb51.net/article/76354.htm) 这篇文章主要介绍了Java正则表达式语法,包括常用正则表达式.匹配验证-验证Email是否正确以及字符串中查询字 ...

  2. sql面试题一 学生成绩

    sql面试题一 学生成绩   原帖链接:http://topic.csdn.net/u/20081020/15/1ABF54D0-F401-42AB-A75E-DF90027CEBA0.html 表架 ...

  3. navigation和tabbar上的文字.图片 自定义

    [[UITabBarItem appearance] setTitleTextAttributes:@{ UITextAttributeTextColor : [UIColor blackColor] ...

  4. tp框架之数据添加

    1.数组添加 //$attr = array("Code"=>"n088","Name"=>"哈萨克族"); ...

  5. python学习笔记(2)

    1.for循环 用户按照顺序循环可迭代对象中的内容. li = [11,22,33,44] for i in li: print i for循环的else 此功能目前只有for循环里面有发现. 具体条 ...

  6. 《图形学》实验七:中点Bresenham算法画椭圆

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画椭圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 50 ...

  7. 数据类型和Json格式

    1. 前几天,我才知道有一种简化的数据交换格式,叫做yaml. 我翻了一遍它的文档,看懂的地方不多,但是有一句话令我茅塞顿开. 它说,从结构上看,所有的数据(data)最终都可以分解成三种类型: 第一 ...

  8. IE8+兼容经验小结

    最近一段时间,我都使用Flask+Bootstrap3的框架组合进行开发.本文就是在这种技术组合下,分享IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的 ...

  9. T-SQL Recipes之 Table Variables and Temporary Tables

    Problem 许多时候, 我们想要Table Variables在动态SQL中执行,但现实是很骨感的.比如这个示例: DECLARE @sql_command NVARCHAR(MAX); DECL ...

  10. css疑难汇总

    关于a标签不换行顶开容器的问题(转自): 我们用div,p,ul,li(等块级元素)布局给其设定了特定的width,那么就会自动的换行.用span,a(等内联元素)设置了display:inline- ...