Lazy Load 延迟加载图片的 jQuery 插件

怎样使用?
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 地址. 透明, 灰色和白色的 1x1 象素的图片已经包含在插件里面.


代码如下:

$("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 {
    height: 600px;
    overflow: scroll;
}

JavaScript 代码:


代码如下:

$("img").lazyload({
     placeholder : "img/grey.gif",
     container: $("#container")
});

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


代码如下:

$("img").lazyload({
    failurelimit : 10
});

将 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 插件. 这是一个相当罕见的问题, 如果有人找到解决办法请联系作者.

(0)

相关推荐

  • 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力.如果用户仅仅在首屏停留,还可以节省流量.如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载. 图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一

  • jquery.lazyload 实现图片延迟加载jquery插件

    什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil

  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包

  • 网络图片延迟加载实现代码 超越jquery控件

    淘宝,QQ,还有当当,亚马逊之类网之类的都有这个效果,原理是分段加载图片,主要用于大型网站节省带宽,可是他们提供的东西压缩混淆看不清,还有的要基于什么雅虎的什么库,总之是很麻烦的,JQ的控件倒是够清晰了,只是还是没有达到节省网络带宽的效果,于是我在JQ懒加载控件上进行一些改进,改进以后的最大的特点就是调用方便,项目中不需要什么太多更改,而且JS文件也不大.(泡泡网工!转载注明出处,谢谢) 1.给泡泡网开发控件,本来想直接用JQ的延迟控件,但是JQ的延迟控件只是加快了加载速度,没有省带宽,也就是说

  • jQuery延迟加载图片插件Lazy Load使用指南

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

  • jquery lazyload延迟加载技术的实现原理分析

    前言 懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器. lazyload在什么场合中应用比较合适? 涉及到图片,falsh资源,ifram

  • jquery图片延迟加载 前端开发技能必备系列

    目前,主要的购物网站都采用了这种加载方式.今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下. 先介绍一下图片延迟加载原理.我们需要先将图片的真实地址保存在一个自定义的属性中(属性名任你发挥吧,这里我用的是lazy-src),而图片的src属性中用一个占位图片来替代,这个占位图片当然是越小越好,它基本上只干活.不露面. 复制代码 代码如下: <img src="images/placeholder.png" lazy-src="images/real

  • Lazy Load 延迟加载图片的jQuery插件中文使用文档

    什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助

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

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

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

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc

  • jquery 插件实现图片延迟加载效果代码

    减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件. 比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片. 如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择. 如何使用,引用如下js: 查看源代码打印帮助 复制代码 代码如下: <scrip

  • jquery延迟加载外部js实现代码

    复制代码 代码如下: var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); $.getScript(gaJsHost + "google-analytics.com/ga.js",function(){ try { var pageTracker = _gat._getTracker("U

  • jQuery实现鼠标滚动图片延迟加载效果附源码下载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化.本特效没有使用专门的图片延迟加载插件,只需要一小段jQuery代码就实现了图片延迟加载,使用非常方便.在本文后面附有源码下载. 效果展示     源码下载 用到的加载中的图片: 代码如下: <!DOCTYPE html> <html> <head> <meta charset

随机推荐