懒加载（又称为延迟加载图片）或符合某些条件时才加载某些图片
懒加载的意义：主要目的是作为服务器前段的优化，减少请求或延迟请求的次数。
呈现懒加载的三种形式：
①.纯粹的延时加载，使用setTimeout或者setInterval进行加载延迟，如果用户在加载前就离开了，那么自然就不会进行加载。
②.第二种就是条件加载，符合某些条件，或者触发了某些事件才开始异步加载。
③.第三种就是可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般据用户看到的底边很近的时候开始加载，这样能保证用户下拉的时候图片正好接上，不会有太长时间的停顿。
使用优点分析
a. 提高网页加载速度，直接影响收录与排名--在蜘蛛抓去的时候，爬行网页会非常快速，以至于页面优化值得到最大提升。
b. 减少请求，降低服务器压力。--只有当用户滚动到可视范围内才加载图片，下载次数减少
使用缺点分析
a. 图片不会被收录
蜘蛛会收录图片到，自己服务器的图片库中。但因为我们的静态页面的图片都指向一张，所以图片不会被蜘蛛收录。
b. 页面又要引入一个 js
我们开发者更希望简单，而不是引入一堆东西，因为很少人去关注源码，很怕会出问题
如何使用js懒加载图片
懒加载图片工具：使用jquery.lazyload.js的机制
http://www.appelsiini.net/projects/lazyload
基本步骤
1.网页中的图片，都设为同一张图片。
2.给图片增加 data-original="img/example.jpg" 的属性，保存这张图片的真实地址。
3.当滚动条到达用户可视区域后，插件自动改变该区域的图片的src属性为缓存的地址。
4.浏览器加载可视区域图。
注意：
1.增加 data-original="图片真实地址"
2.页面所有的img标签的src属性指向同一个图片(图片未加载时，显示的一张临时图)
3.图片一定要设置 width 与 height （有宽高，浏览器就可以分配空间位置，否则就要等待获取图片宽高，或者以后重绘来再次排版。）
img标签在使用的时候 一下几个事件非常的有用：
onError ：当图片加载出现错误，会触发 经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉.
onLoad ：事件是当图片加载完成之后触发 .
onAbort ：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载”.
onError ：当图片加载出现错误，会触发 经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉.
onLoad ：事件是当图片加载完成之后触发 .
onAbort ：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载”.
<img src="test.png" data-original="example.jpg" width="480" height="480">
之后可以直接用插件处理$("img.lazy").lazyload(); 当然，也可以自己进行DOM的书写（也不难）
data-original这个一般设定图像的真实地址。而src就导入一张所有图片站位的图片地址，这个站位图片，再最开始就已经下载好了。
<body>
<button>加载图片</button>
<img src="test.png" alt="测试" data-original = "test2.png">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg = document.images[0];
//延迟加载，给图片加了 载入事件
function aftLoadImg(obj, url){
var oImg = new Image();
oImg.onload = function(){
obj.src = oImg.src;
}
oImg.src = url;
}
oBtn.onclick = function(){
oImg.src = "test2.png"; // 如果图片不是很大，就直接改一下src就可以了，
for (var pro in oImg.dataset) { //这里证明，dataset里面有一个orignial属性，是test2.png。
document.write(pro + " " +oImg.dataset[pro] + "</br>");
//会打印出 original test2.png
}
//如果觉得图片有点大，就直接加载一个事件，上面已经说明过，图像是有onload事件的，等加载完毕后在显示。
if(oImg.dataset){ //是否可以获取dataset属性。
aftLoadImg(oImg, oImg.dataset.original);
}
else{
aftLoadImg(oImg,oImg.getAttribute("data-original"));
}
}
</script>
</body>
使用jQuery插件
a.懒加载图片是基于jquery.js的，所以：
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
b. 需要懒加载的图片， ①.增加 data-original="图片真实地址"
②.页面所有的img标签的src属性指向同一个图片(图片未加载时，显示的一张临时图)
③.图片一定要设置 width 与 height
注意：这点你可能没办法接受，因为需要改变你的html
<img src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">
c.把需要懒加载的图片，选中，然后调用插件函数就ok了！
$("img.lazy").lazyload();
另一种方式，通过判断滚动条的位置，来选择加载的时机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
500px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
display: block;
}
img{
border: none;
vertical-align: middle;
}
.in{
border: 1px solid black;
margin: 10px;
text-align: center;
height: 400px;
400px;
float: left;
}
.in img{
height: 400px;
400px;
}
</style>
</head>
<body>
<ul class="list">
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>
</ul>
<script>
var aImages = document.images;
alert(aImages.length);
loadImg(aImages);
window.onscroll = function(){
loadImg(aImages);
};
function loadImg(arr) {
for ( var i = 0,len = arr.length; i < len; i++) {
// 分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角（注意，不是文档区域的左上角）的偏移像素值
if (arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
arr[i].isLoad = true;
arr[i].style.cssText = "transition: ''; opacity: 0;";
if (arr[i].dataset) {
aftLoadImg(arr[i], arr[i].dataset.original);
} else {
aftLoadImg(arr[i], arr[i].getAttribute("data-original"));
}
(function(i){
setTimeout(function(){
arr[i].style.cssText = "transition: 1s; opacity: 1;" //transition CSS3渐变
}, 16);
})(i);
}
}
}
function aftLoadImg(obj, url){
var oImg = new Image();
oImg.onload = function() {
obj.src = oImg.src;
}
oImg.src = url;
}
</script>
</body>
</html>
//获得对象距离页面顶端的距离
function getH(obj) {
var h = 0;
while (obj) {
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}
//当网页的滚动条滚动时要时时判断当前li的位置！
window.onscroll = function () {
var oDiv = document.getElementById('listID');
var oUl = oDiv.children[0];
var aLi = oUl.children;
for (var i = 0, l = aLi.length; i < l; i++) {
var oLi = aLi[i];
//检查oLi是否在可视区域
var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
var h = getH(oLi);
if (h < t) {
setTimeout("setImg(" + i + ")", 500);
}
}
};
//当页面加载完成以后要主动运行一下window.onscroll，从而获得当前可视范围内的图片。
window.onload = function () {
window.onscroll();
};
参考：
http://blog.csdn.net/pvfhv/article/details/6176099
http://blog.163.com/hongshaoguoguo@126/blog/static/180469812014114102332873/