提高页面加载速度的方法有很多种，这里推荐一种在页面图片较多的时，提高页面整体加载速度的方法–延迟加载(lazyload)。
当一个页面图片较多时，页面整体的数据就会比较大，一次load完再展示，页面打开会显得比较慢，延迟加载就是在浏览器在解析HTML时不对图片进行加载，当页面打开后，监控滚动条对本屏图片进行逐个载入，这样可以将一个页面数据请求分散为多个，大大减少一次请求load数据的时间，从而提高页面的加载速度。
借助 jquery lazyload插件可以轻松实现延迟加载，调用方式如下：
引入jquery和jquery lazyload插件：
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>
图片标签处理：
<img data-original="img/example.jpg" width="640" height="480"> <!-- <img data-original="图片路径" width="640" height="480"> 即把img标签src属性改为data-original -->
在页面加载完成后调用：
<script>
$(function() {
$("img").lazyload();
//加上淡出效果
//$("img").lazyload({ effect : "fadeIn" });
});
</script>
下载地址：下载
转载请注明出处：怡然之乐 – FineYi