lazy load plugin for jQuery

来源：互联网发布：微信收费群设置知乎编辑：程序博客网时间：2024/05/01 05:46

今天学习了一款基于jquery的图片延迟加载插件Lazy Load Plugin for jQuery，官网为http://www.appelsiini.net/projects/lazyload，下面是http://www.sunzhenghua.com/jquery-lazy-load-plugin-for-delay-loading-picture的教程(比官网更简介易懂)：

====================================================================================================

如何使用 Lazy Load ?2013的某一天

Lazy Load 插件基于 jQuery 类库，你可以在 HTML 文件的头部或尾部加载它们:

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

接下来就需要对 img 标签注意以下几点:

■ 将初始加载的图片路径写在 src 属性中，在如下示例中使用的就是 1 x 1 像素(pixel)的图片: grey.gif
■ 将真实的图片路径写在 data-original 属性中
■ 给需要延迟加载的 img 标签添加一个特别的 class，这样就可以轻松的用插件来控制哪些 img 标签需要被延迟加载

<imgclass="lazy-load"     src="img/grey.gif"     data-original="img/realpicture.jpg"     width="640"     heigh="480"/>

随后就是启用延迟加载:

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

这样只要是带有 lazy-load class 的 img 标签都会被延迟加载，查看效果

1.设置敏感度

默认情况下，只有当被延迟加载的图片出现在屏幕中时，图片才会被加载，但是如果你想图片提早一点被加载的话，你可以使用 threshold 参数，将其设置为 200, 这样图片将会在距离显示前的 200 像素(pixel)位置被加载，查看效果

$("img.lazy-load").lazyload({    threshold : 200 });</span></a>

2.使用事件来触发图片加载

默认情况下，那些还没有被加载的图片只有等到用户使用下拉条下拖至该图片区域时，才会被加载。不过你可以使用 jQuery 事件来触发加载，比如说: click 或 mouseover，当然你也可以使用自定义的事件来触发，查看效果

$("img.lazy-load").lazyload({    event : "click"});</span></a>

3.使用效果来显示图片

默认情况下，插件会等到图片完全加载后，再调用 show() 方法来显示图片，这样你可以使用任何你想要效果，比如说: fadeIn，查看效果

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

4.在自定义区域(container)中的图片

如果一个 div 含有下拉条，横向或纵向，你可以将该 div 当做一个对象(object)传给插件，查看效果

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

5.设置延时

设置延时不是 Lazy Load 自身的功能，而是通过 setTimeout() 方法来实现。如下代码会等到页面完全加载完，包括可见的图片，再过5秒，图片就会自动显示，查看效果

$(function() {              $("img.lazy-load").lazyload({        event : "sporty"    });});$(window).bind("load",function() {     vartimeout = setTimeout(function() {$("img.lazy-load").trigger("sporty")}, 5000);});

6.加载隐藏图片

某些情况下，你可能会有些隐藏图片(hidden)，默认情况下，插件会跳过这些隐藏图片，然而你可以设置 skip_invisible 属性为 false 来加载显示隐藏图片:

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

====================================================================================================

demo地址：http://download.csdn.net/detail/lkl713/7931235

0 0