缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

转载 2013年12月05日 16:15:46

Lazy Load 这个 jQuery 插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从后台请求下载图片,然后显示出来。使用这个插件,可以在需要显示图片的时候,才下载图片,所以可以减少服务器的压力,避免不必要的资源下载。如果一个人不看下面的图片,那加载下面的图片就是一种浪费。

Lazy Load 插件原理

修改目标 img 的 src 属性为 orginal 属性,从而中断图片的加载。检测滚动状态,然后把可视网页中的 img 的 src 属性还原加载图片,制造缓冲加载的效果。

但是现在,很多javascript大牛分析得出,这个插件其实并没有真正的缓加载效果。确实是这样,官方也已经给出了说明和解决方法了。

问题原因:在新版的浏览器中,即使你删除了 Javascript 控制的 src 属性,浏览器仍然会去加载这个图像。

解决方法:直接修改 HTML 的结构,在 img 标签中添加新的属性,把 src 属性的值指向占位图片,添加 data-original 属性,让其指向真正的图像地址。

例如:<img data-original=“img/example.jpg” src=“img/grey.gif”>

这样我们就需要先分析一下插件的优缺点,再决定是否要使用。

使用:

  1. 必须按照这种结构才有实际作用,需要对输出进行定义。
  2. 可以节约服务器资源,并且有较好的用户体验。
  3. 如果图片很大,当用户滚动到目标位置,需要较长时间下载。

不使用:

  1. 增加服务器压力,浪费系统资源。

究竟使用不使用,还是要看你自己的实际需求。如果你图片比较少,就不必使用了,如果你图片比较多,可以考虑一下。但是,使用的话,你可能需要把每一 个img 标签上自己加上这个属性,会稍微麻烦一点。潜行者m博客上,就用了这个插件,不过没用使用官方说的那种结构,要的只是一个缓冲加载的效果。

开始使用 lazyload.js

第一步:加载相关文件。

很明显,你要加载jquery和这个插件。你可以使用以下代码,加载这几个文件:

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

第二步:定义图片结构。

按照官方的建议,定义你的img结构:

<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

第三步:触发这个插件,生效。

激活以下,你就可以在目标中使用了。

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

lazyload.js 高级使用方法:

下面部分来自官方文档,将官方文档进行了一下简单的翻译。

更周全的做法

我们不得不思考这样一个问题。我们定义了这样一个结构,那么网页中,就不会加载源图像了。只有当 Javascript 执行,才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项,那么我们的这个图像就无法显示出来。也就是说,如果没有 Javascript 的支持,我们的图像就无法显示出来。

应对这个问题,我们需要引入 noscript 标签。大体思路如下:用 noscript 包含真实的图像位置,当浏览器不支持 Javascript,直接显示图像。对现有图像,隐藏处理,使用 show() 方法触发显示。这样,如果浏览器不支持 Javascript,我们自定义的 img 就不会出现,而显示 noscript 里面的图像。具体实现代码如下:

<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
<script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>

提前加载

默认的情况是,当你滚动到图片位置的时候,插件开始加载。这样,用户可能首先看到的是一个空白图像,然后再缓慢出现。如果你想在用户滚动之前,提前加载这个图像,你可以配置一下参数。

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

threshold 这个参数,就是用来提前加载的。上面这个语句的意思是,当距离图片还有200像素的时候,就开始加载图片。

自定义触发事件

默认的触发事件,是滚动,当你滚动的时候,就会检查然后加载。你可以使用event属性,设置你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载图像。

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

自定义显示效果

默认的图片实现效果,就是没有效果,下载完成之后,直接显示出来。这样的用户体验并不好,你可以设置 effect 属性,来控制显示图片的效果。例如

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

fadeIn的效果就是,改变图片的透明度,渐现的方式出现。效果: effect demo page

把图像插入某个容器

大家如果使用智能手机的话,经常去应用网站下载应用,他们通常使用一个横着的容器,放一些手机截图。使用 container 属性,能很轻松在容器中实现缓冲加载。首先,我们需要用css定义这个容器,然后用这个插件进行加载。效果: vertical

#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({         
     container: $("#container")
});

加载不可见图像

有部分图像是不可见的,我们对其加上类似 display:none 等属性的图像。默认的情况下,这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像,我们需要将 skip_invisible 设置为 false

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

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

前言Lazy Load 这个 jQuery 插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从...
  • u011413061
  • u011413061
  • 2015年12月02日 19:20
  • 400

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

Lazy Load 这个 jQuery 插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从后台...
  • sha_cq
  • sha_cq
  • 2013年03月08日 16:22
  • 444

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解 于江水 留言: 4 浏览:13920 文章目录 [隐藏] Lazy Load 插件原理 开始使用 lazyload...
  • forest_fire
  • forest_fire
  • 2016年03月21日 10:47
  • 138

缓冲加载图片的jQuery插件lazyload.js 使用方法详解

Lazy Load这个jQuery插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从后台请求下...
  • lcradio
  • lcradio
  • 2013年11月27日 16:12
  • 387

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

Lazy Load 这个 jQuery 插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从后台...
  • u012763269
  • u012763269
  • 2015年07月06日 14:32
  • 323

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

Lazy Load 这个 jQuery 插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从后台...
  • nic7968
  • nic7968
  • 2014年05月06日 10:20
  • 518

jquery插件lazyload.js延迟加载图片的使用方法

来源:http://www.jb51.net/article/46985.htm 如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件...
  • eastbird
  • eastbird
  • 2015年08月21日 11:23
  • 287

缓冲加载图片的jQuery插件lazyload.js 真正省资源用法

jQuery插件Lazy Load.js,是用来缓冲加载图片的。如果一个网页内容很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从请求下载...
  • baidu_25310663
  • baidu_25310663
  • 2015年06月25日 10:07
  • 289

缓冲加载图片的jQuery插件lazyload.js 真正省资源用法

jQuery插件Lazy Load.js,是用来缓冲加载图片的。如果一个网页内容很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从请求下载...
  • u014704496
  • u014704496
  • 2014年09月30日 11:41
  • 210

网页图片延迟加载LazyLoad.js使用方法介绍和实例

延迟加载图片插件LazyLoad.js的使用方法 我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来。这是怎么实现出来的呢?其实这就是目前较...
  • for12
  • for12
  • 2015年10月13日 17:24
  • 4620
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
举报原因:
原因补充:

(最多只允许输入30个字)