Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 下载地址

延迟加载长页面中的图片 ,加快页面加载速度,降低服务器负担

① 引入JS文件 

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

② 图像的地址必须放在img标签的data-original属性上,可以增加一个特定的class,便于进行图像插件捆绑 

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />

$(function() {
    $("img.lazy").lazyload();
});

设置临界点，距离屏幕200像素时提前加载 threshold

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

设置事件来触发加载 如点击、滑动等 event

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

使用特效  fadeIn  

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

在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级 

<img class="lazy" data-original="img/example.jpg" width="640" heigh="480">
<noscript>
    <img src="img/example.jpg" width="640" heigh="480">
</noscript>

可以通过 CSS 隐藏占位符 

.lazy {
    display: none;
}

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.

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

图片在容器里面水平滚动

$("img.lazy").lazyload({
    container: $("#container")
});

图片在容器里面垂直滚动

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

#container {
    height: 600px;
    overflow: scroll;
}

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

当图像不连续时 将 failurelimit 设为 10 ，令插件找到 10 个不在可见区域的图片时才停止搜索

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

加载隐藏的图片 Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false

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