网站PC前端图片加载优化---jQuery lazyload

在PC浏览公司主网站的过程中，首页图片较多，加载比较慢，之前听说过延时加载技术，没有用过。这次实际测试了一下，感觉体验提升了很多。引入脚本文件：

<script type="text/javascript" src="/resources/js/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function(){
$("img.lazy").lazyload({
effect:'fadeIn'
});
});
</script>

对应修改需要进行延时加载的img标签，

<img src="/styles/images/loading.gif" data-original="实际的图片路径" class="lazy" alt="图片alt">

src放置loading效果的gif图片，data-original放置实际的图片路径，设置class为lazy（必须）。

实际中遇到两个问题：

问题一：loading.gif在对应的图片区域被放大了。

原因是原来的img有css样式，loading.gif自动套用了原来的css样式，被放大了。给loading.gif图片专门写了一个loading的样式，原图显示并居中，在对应图片延时加载完成后removeClass。

<script type="text/javascript" src="/resources/js/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function(){
$("img.lazy").lazyload({
placehoder: '/styles/images/loading.gif',
effect:'fadeIn',
failure_limit : 10,
load:function(elements_left, settings) {
$(this).removeClass("loading");
}
});
});
</script>

问题二：首页div分成left和right两个平行区域，假定是一个3行2列的区域，左边1列是div-left，右边1列是div-right，滚动条移动过程中发现左侧图片loading完成后，右侧顶部图片才开始加载。

原因是：滚动页面的时候, Lazy Load 会循环为加载的图片。在循环中检测图片是否在可视区域内。默认情况下在找到第一张不在可见区域的图片时停止循环。图片被认为是流式分布的，图片在页面中的次序和 HTML 代码中次序相同。但是在一些布局中, 这样的假设是不成立的。不过你可以通过 failurelimit 选项来控制加载行为。

设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点。

<script type="text/javascript" src="/resources/js/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function(){
$("img.lazy").lazyload({
placehoder: '/styles/images/loading.gif',
effect:'fadeIn',
failure_limit : 10,
load:function(elements_left, settings) {
$(this).removeClass("loading");
}
});
});
</script>

参考链接：http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

jquery.lazyload.min.js是mini版；jquery.lazyload.js是full版。

2016年2月1日更新：今天研究京东众筹的时候，发现也是用的一样的技术，他们的布局一开始就设计好了，所以loading.gif大小和真实图片大小一致。多设置了threshold : 50参数，表示令图片在距离屏幕50像素的时候提前加载。