网站图片资源过多，图片在加载过程中过慢，为了让图片按需加载，这里使用 lazyload 进行图片延时记载。
下载需要的js文件
简单使用文档：
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script>
$(function(){
$('img.lazy').lazyload({
//container: $('.product-list'), // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
threshold: 100, //当图片顶部距离显示区域还有100像素时，就开始加载
placeholder : "img/grey.gif", // 图片未加载时，占位
effect: "fadeIn", // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
effect_speed: 1000, // 效果出现的时间
event: 'scroll', // 滚动滚轮时触发，可以是：click、mouseover等
data_attribute: 'original', // img标签中保存url的自定义属性，默认：data-original
skip_invisible: true, // 是否跳过已经隐藏的图片（display:none）
failure_limit: 2, // 由于延迟加载是根据Dom从上到下执行
// 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载
// 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止
appear: function(){ // 当图片位置刚出现在视图时，触发此事件
$(this).attr('src');
},
load: function(){ // 当图片路径加载之后，触发此事件
$(this).attr('src');
}
});
})
</script>真实使用文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0 auto;
}
.pg-header{
height: 48px;
background-color: #3b5998;
}
.w{
width: 980px;
margin: 0 auto;
}
.clearfix:after{
clear: both;
content: '.';
visibility: hidden;
height: 0;
display: block;
}
.product-list .item{
float: left;
height: 240px;
width: 184px;
overflow: hidden;
border: 1px solid red;
padding: 5px;
}
.product-list .item .lazy{
height: 200px;
width: 184px;
}
</style>
</head>
<body>
<div></div>
<div>
<div>
<div class="product-list clearfix">
<div>
<img data-original="img/1.png"/>
</div>
<div>
<img data-original="img/2.png" />
</div>
<div>
<img data-original="img/3.png"/>
</div>
<div>
<img data-original="img/4.png"/>
</div>
<div>
<img data-original="img/5.png"/>
</div>
<div>
<img data-original="img/6.png" />
</div>
<div>
<img data-original="img/7.png"/>
</div>
<div>
<img data-original="img/8.png"/>
</div>
<div>
<img data-original="img/9.png" />
</div>
<div>
<img data-original="img/10.png" />
</div>
<div>
<img data-original="img/11.png"/>
</div>
<div>
<img data-original="img/12.png"/>
</div>
<div>
<img data-original="img/13.png"/>
</div>
<div>
<img data-original="img/14.png" />
</div>
<div>
<img data-original="img/15.png" />
</div>
<div>
<img data-original="img/16.png" />
</div>
<div>
<img data-original="img/17.png" />
</div>
<div>
<img data-original="img/1.png"/>
</div>
<div>
<img data-original="img/2.png" />
</div>
<div>
<img data-original="img/3.png"/>
</div>
<div>
<img data-original="img/4.png"/>
</div>
<div>
<img data-original="img/5.png"/>
</div>
<div>
<img data-original="img/6.png" />
</div>
<div>
<img data-original="img/7.png"/>
</div>
<div>
<img data-original="img/8.png"/>
</div>
<div>
<img data-original="img/9.png" />
</div>
<div>
<img data-original="img/10.png" />
</div>
<div>
<img data-original="img/11.png"/>
</div>
<div>
<img data-original="img/12.png"/>
</div>
<div>
<img data-original="img/13.png"/>
</div>
<div>
<img data-original="img/14.png" />
</div>
<div>
<img data-original="img/15.png" />
</div>
<div>
<img data-original="img/16.png" />
</div>
<div>
<img data-original="img/17.png" />
</div>
<div>
<img data-original="img/1.png"/>
</div>
<div>
<img data-original="img/2.png" />
</div>
<div>
<img data-original="img/3.png"/>
</div>
<div>
<img data-original="img/4.png"/>
</div>
<div>
<img data-original="img/5.png"/>
</div>
<div>
<img data-original="img/6.png" />
</div>
<div>
<img data-original="img/7.png"/>
</div>
<div>
<img data-original="img/8.png"/>
</div>
<div>
<img data-original="img/9.png" />
</div>
<div>
<img data-original="img/10.png" />
</div>
<div>
<img data-original="img/11.png"/>
</div>
<div>
<img data-original="img/12.png"/>
</div>
<div>
<img data-original="img/13.png"/>
</div>
<div>
<img data-original="img/14.png" />
</div>
<div>
<img data-original="img/15.png" />
</div>
<div>
<img data-original="img/16.png" />
</div>
<div>
<img data-original="img/17.png" />
</div>
</div>
</div>
</div>
<div></div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script>
$(function(){
$('img.lazy').lazyload({
//container: $('.product-list'), // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
threshold: 100, //当图片顶部距离显示区域还有100像素时，就开始加载
placeholder : "img/grey.gif", // 图片未加载时，占位
effect: "fadeIn", // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
effect_speed: 1000, // 效果出现的时间
event: 'scroll', // 滚动滚轮时触发，可以是：click、mouseover等
data_attribute: 'original', // img标签中保存url的自定义属性，默认：data-original
skip_invisible: true, // 是否跳过已经隐藏的图片（display:none）
failure_limit: 2, // 由于延迟加载是根据Dom从上到下执行
// 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载
// 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止
appear: function(){ // 当图片位置刚出现在视图时，触发此事件
$(this).attr('src');
},
load: function(){ // 当图片路径加载之后，触发此事件
$(this).attr('src');
}
});
})
</script>
</body>
</html>这里把img/grey.gif 图片上传上来
项目中可以直接拿下来使用。