昆明网站建设信得过品牌，西南首家三维全景技术提供商，为您提供营销型网站建设服务。

大家有没有发现，在你使用本站的时候，当你向下拉动滚动条时下面的文章缩略图才开始加载？这是一个比较不错的用户体验。就是说网站打开的时候不会一下子把所有的图片都加载出来，当拉动滚动条后用户看到了才会显示。

前不久淘宝网站新版上线，我特别去看了下，其中我就有注意到它的一个功能，当搜索商品时显示的商品列表页，整页的图片不是一下子全部加载，而是当用户拉动滚动条后看到的区域才加载图片。对于一个像淘宝这样的一个数据量很大，图片很多的网站来说，才用这种图片延迟加载，减少了页面加载的时间了，也减轻了服务器的压力，最重要的是得到了友好的用户体验感。

这个大家可以去搜索试试看，当然在本站你也可以拉动并主要文章缩略图的加载。其实这个效果实现已经有人为我们写好啦，百度了一下，你就能找到了一个jquery的实现这种效果的插件：jquery.lazyload，一个很不错的插件。

如果你是图片网站，而且一个页面要加载很多图片，这个插件是个很不错的选择。

 使用方法，引用如下js：

1
2

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery.lazyload.js" type="text/javascript"><!--mce:1--></script>

在你的页面中加入如下的javascript：

1

$("img").lazyload();

这将会使所有的图片都延迟加载。插件还有几个配置项可供设置。

当然对于一些用户来说就上面的功能远远是不能达到要求的，下面我们看看是如何设置灵敏度的。我们可以设置阀值来控制 这个功能比较人性化吧。

1

$(“img”).lazyload({ threshold : 200 });

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

1
2
3
4

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});

我们还可以通过定义effect 参数来定义一些图片显示效果

1
2
3
4

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

下载地址: source, minified or packed