定义

图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。 

惰性加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。

实现

懒加载的难点在于确定某张图片是否是用户需要的资源，在浏览器中，用户需要的是可视区内的资源，因此我们只需要判断图片是否已经呈现在可视区内，当图片呈现在可视区内时，获取图片的真实地址并赋给该图片即可(图片宽高需要指定，可以利用padding处理)。

判断是否存在于可视区

浏览器视口高度

待加载资源距离视口顶端位置

通过以上两点即可判断图片是否位于可视区内。

var nodes = document.querySelectorAll('img[data-src]'),

   elem = nodes[0],

   rect = elem.getBoundingClientRect(),

   vpHeight = document.documentElement.clientHeight;

if(rect.top < vpHeight && rect.bottom>=0) {

 console.log('show')

}
之后获取图片的真实地址

<img src="loading.gif" alt="" data-src='1.gif'>

...

 

<script>

   var src = elem.dataset.src;

</script>
把真实地址赋给图片

var img = new Image();

img.onload = function(){

 elem.src = img.src;

}

img.src = src;
完整代码如下

var scrollElement = document.querySelector('.page'),

   viewH = document.documentElement.clientHeight;

 

function lazyload(){

 var nodes = document.querySelectorAll('img[data-src]');

 

 Array.prototype.forEach.call(nodes,function(item,index){

   var rect;

   if(item.dataset.src==='') return;

 

   rect = item.getBoundingClientRect();

 

   if(rect.bottom>=0 && rect.top < viewH){

       (function(item){

         var img = new Image();

         img.onload = function(){

           item.src = img.src;

         }

         img.src = item.dataset.src

         item.dataset.src = ''

       })(item)

   }

 })

}

 

lazyload();

 

scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));

 

function throttle(fun, delay, time) {

   var timeout,

       startTime = new Date();

   return function() {

       var context = this,

           args = arguments,

           curTime = new Date();

       clearTimeout(timeout);

       if (curTime - startTime >= time) {

           fun.apply(context, args);

           startTime = curTime;

       } else {

           timeout = setTimeout(fun, delay);

       }

   };

};
转载来源：http://blog.csdn.net/Magneto7/article/details/55518784

                    
								            

							
							
定义
图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。 
惰性加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。
实现
懒加载的难点在于确定某张图片是否是用户需要的资源，在浏览器中，用户需要的是可视区内的资源，因此我们只需要判断图片是否已经呈现在可视区内，当图片呈现在可视区内时，获取图片的真实地址并赋给该图片即可(图片宽高需要指定，可以利用padding处理)。
判断是否存在于可视区
浏览器视口高度

待加载资源距离视口顶端位置

通过以上两点即可判断图片是否位于可视区内。

var nodes = document.querySelectorAll('img[data-src]'),
    elem = nodes[0],
    rect = elem.getBoundingClientRect(),
    vpHeight = document.documentElement.clientHeight;
if(rect.top < vpHeight && rect.bottom>=0) {
  console.log('show')
}


之后获取图片的真实地址

<img src="loading.gif" alt="" data-src='1.gif'>
...
 
<script>
    var src = elem.dataset.src;
</script>


把真实地址赋给图片

var img = new Image();
img.onload = function(){
  elem.src = img.src;
}
img.src = src;


完整代码

var scrollElement = document.querySelector('.page'),
    viewH = document.documentElement.clientHeight;
 
function lazyload(){
  var nodes = document.querySelectorAll('img[data-src]');
 
  Array.prototype.forEach.call(nodes,function(item,index){
    var rect;
    if(item.dataset.src==='') return;
 
    rect = item.getBoundingClientRect();
 
    if(rect.bottom>=0 && rect.top < viewH){
        (function(item){
          var img = new Image();
          img.onload = function(){
            item.src = img.src;
          }
          img.src = item.dataset.src
          item.dataset.src = ''
        })(item)
    }
  })
}
 
lazyload();
 
scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));
 
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};


原文链接 ：http://mp.weixin.qq.com/s/W8qAWARdyacrTW07NBPXFA

            
						
        
        
                
    

                    
								            

							
							
定义
图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。 
惰性加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。
实现
懒加载的难点在于确定某张图片是否是用户需要的资源，在浏览器中，用户需要的是可视区内的资源，因此我们只需要判断图片是否已经呈现在可视区内，当图片呈现在可视区内时，获取图片的真实地址并赋给该图片即可(图片宽高需要指定，可以利用padding处理)。
判断是否存在于可视区
浏览器视口高度

待加载资源距离视口顶端位置

通过以上两点即可判断图片是否位于可视区内。

var nodes = document.querySelectorAll('img[data-src]'),
    elem = nodes[0],
    rect = elem.getBoundingClientRect(),
    vpHeight = document.documentElement.clientHeight;
if(rect.top < vpHeight && rect.bottom>=0) {
  console.log('show')
}


之后获取图片的真实地址

<img src="loading.gif" alt="" data-src='1.gif'>
...
 
<script>
    var src = elem.dataset.src;
</script>


把真实地址赋给图片

var img = new Image();
img.onload = function(){
  elem.src = img.src;
}
img.src = src;


完整代码

var scrollElement = document.querySelector('.page'),
    viewH = document.documentElement.clientHeight;
 
function lazyload(){
  var nodes = document.querySelectorAll('img[data-src]');
 
  Array.prototype.forEach.call(nodes,function(item,index){
    var rect;
    if(item.dataset.src==='') return;
 
    rect = item.getBoundingClientRect();
 
    if(rect.bottom>=0 && rect.top < viewH){
        (function(item){
          var img = new Image();
          img.onload = function(){
            item.src = img.src;
          }
          img.src = item.dataset.src
          item.dataset.src = ''
        })(item)
    }
  })
}
 
lazyload();
 
scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));
 
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};


原文链接 ：http://mp.weixin.qq.com/s/W8qAWARdyacrTW07NBPXFA

            
						
        
        
                
    

一、什么是懒加载？
  懒加载，就是延迟加载。针对于多图片的页面，只有当该图片出现在页面视区中时，再加载该图片。。可以防止页面一次性加载完所有的图片，用户等待时间较长，影响用户体验。
二、如何实现懒加载
 1. 将页面中的图片的src属性设置为空，并将src属性真正的值存放在自定义属性data-originnal（自定义属性以data-开头）。
 2.为页面中的图片设置好大小，防止引起页面的回流，影响性能。
 3.判断元素是否进入用户视野中。（利用元素的offsetTop属性与  scrollTop、clientTop之间的关系判断）。若进入视野，则将      data-original属性的值赋给图片的src属性
 4.  滚动，重复判断元素是否进入视野。
三、具体实现：
1.设计HTML
<img data-original="mogu.jpg" alt="" class="picture" src=""  >
2.判断元素是否进入视野
if(scrollTop+height>offsetTop){					
					
	var img = new Image();             //跨域异步请求图片
        			
       	img.onload = function () {
       		console.log(1);
         	item.src = img.src;
       	}
      	img.src = item.dataset.original;    //获取自定义对象的属性
      				   				
}
四、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>lazyload</title>
	<style>
	#pictures{
		width: 900px;
		border: 1px solid #ccc;
		overflow: hidden;
	}
	.picture{
		float:left;
		width:250px;
		height:250px;
		margin: 10px 20px;
		border:1px solid #ccc;

	}
	</style>
	
</head>
<body>
	<div id="pictures">
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >

	</div>
	<script>
		var images=document.getElementsByTagName('img');
		function lazyload() {
		    Array.prototype.forEach.call(images,function(item,index) {
				
				var height=document.documentElement.clientHeight;				
				var scrollTop=document.documentElement.scrollTop;				
				var offsetTop=item.offsetTop;				

				if(scrollTop+height>offsetTop){					
					
					var img = new Image();        			
       				        img.onload = function () {       					    
         		 		   item.src = img.src;
       				        }
      				img.src = item.dataset.original;      				   				
			        }							
			});		
		}
		lazyload();                   //第一次加载页面时需要自动加载

		document.addEventListener("scroll",lazyload); 

	</script>
</body>
</html>
五、代码中的基础问题以及解决方法
 1.判断是否进入可视区
      
2.获取自定义的属性
   1.通过element.dataset.original.
      语法：
                
     基本上最新的浏览器都支持，对于低版本的浏览器兼容性不好。
  对于 element.dataset的详细使用，参考链接点击打开链接
  对于如何兼容低版本的浏览器，请参考   我的文章 ，实现兼容版本的element.dataset。
  2.通过 document.getAtrribute（“data-original”）；
     兼容性好
六、代码的其他问题
   判断元素是否在可视区域时，会重复判断元素，造成浪费。
七、使用echo.js库实现预加载
  echo.js使用原生js编写，不需要依赖其他库。可独立使用。（lazyload是jquery插件，使用时必须引入jquery，功能完善）
      1. 下载并引入echo.js。   
<script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.js"></script>
      2.设置图片的自定义属性为data-echo
      3. 使用：获取元素并调用init（)方法。接收一个对象。对象参数如下。
         offset：图片在可视区域下方一段距离时，开始加载
         throttle：图片延迟多少毫秒后加载。    
         unload：是否卸载在可视区域外面的图片。默认为false。            
echo.init({
	offset:0,
	throttle:0,
	unload:true,
	callback:funtion(element,op){

	}
});