懒加载技术在长页面图片加载中的应用-优快云博客

本文介绍如何使用lazyload技术优化长页面图片加载速度，通过引用jQuery和lazyload.js，设置图片加载阀值及触发事件，实现图片在用户滚动到可见区域时才加载，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

lazyload用来加载比较长的页面中的图片，直到下拉到显示他们为止，页面太长的时候使用它可以加快页面显示的速度。

1.使用它

使用它只需要引用两个文件，如下：

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

还要在img的标签中添加一个属性，还要给这个img添加一个名字，代码如下：

<img class="lazy" src='../../images/defaultpic.jpg' data-original="img/example.jpg" width="640" height="480">

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

2.添加一个阀值

可以让它在还未显示在屏幕上之前先记载200个像素，代码如下：

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

3.事件出发

使用click或者onmouseover触发加载

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

作者：Tyler Ning
出处：http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过以下邮箱地址williamningdong@gmail.com 联系我，非常感谢。

图片懒加载