图片延迟加载——jquery.lazyload.js

图片延迟加载——jquery.lazyload.js

提升网页加载速度的方法有很多种, 用 jquery.lazyload.js 实现图片异步延迟加载, 对于页面包含图片较多的网站来说, 会是个不错的提升网页打开速度的方法。

1、导入 JS 插件：

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

2、在页面中插入 JavaScript 代码：

$(document).ready(function($){
$("img").lazyload({
    placeholder:"grey.gif", //加载图片前的占位图片
    effect:"fadeIn" //加载图片使用的效果(淡入)
});
});

如何设置单个图片延迟加载

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 的图片将被延迟加载.