jquery懒加载jquery.lazyload.js

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事件，例如click和mouseover。也能够使用自定义事件，如sporty、foobar默认状况下是要等到用户向下滚动而且图像出如今视口中时。只有当用户点击它们才加载图片：

 

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

 

 

使用特效

默认状况下，插件等待图像彻底加载并调用show()。你能够使用任何你想要的效果。下面的代码使用fadeIn （淡入效果）。

 

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

 

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