순수 js 이미지 비동기 로드 원리 및 구현

최근 에 개인 홈 페이지 를 만 들 었 어 요. http://www.cyfhw.top。
페이지 최 적 화 를 할 때 먼저 js 비동기 로드 입 니 다.그 다음은 그림 비동기 로드 입 니 다.
페이지 최적화 에 대해 볼 수 있다.야후 사이트 의 페이지 성능 최적화 에 관 한 34 개의 황금 수칙http://blog.csdn.net/hch126163/article/details/5966021
그림 을 비동기 로 불 러 올 때 나 는 처음으로 가장 간단 한 방법 을 사용 했다.
직접 배경 에서 img src 속성 을 data-src 속성 으로 변경 합 니 다.브 라 우 저 모 름 데이터-src,페이지 를 불 러 올 때 브 라 우 저 는 그림 을 불 러 오지 않 습 니 다.
js 수정 img data-src 속성 은 src 입 니 다.이 때 브 라 우 저 는 그림 을 다운로드 하 러 갑 니 다.그림 비동기 로드,완벽 하 게 실현,테스트 도 문제 없습니다.
js 코드 는 다음 과 같 습 니 다:

var imgs = document.getElementsByTagName("img");
	for(var i=0,l=imgs.length;i
		var url = imgs[i].getAttribute("data-src");
		if(!imgs[i].src && url){
			imgs[i].src = url;
		}
	}

 
  
          ，        。     ，        【  20 】    ，               ！
  
 
  
  ，             ，  ：                        
  

  
    ，            ：
  
1、      ，              ，             ，         ，     ，               ，             。
  

  
2、      ，           ，      ，       ，            。          ，       ，    【   wifi    ，    】。
  

  
    ，       ，   。       ，  ，      ，          ，    。
  
           ，       ，             。
  

  

  
 
  
var imgs = document.getElementsByTagName("img");
  
bindEvent(window,'scroll',lazyload); 
lazyload(); 
function lazyload(){ 
forEach(imgs,function(img,i){ 
if(!img || img.src ){return;} 
var t = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ; 
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
var ot=getAbsPoint(img).y; 
if( h+tot+img.offsetHeight) 
	{
		return;
	}
	var url = img.getAttribute("data-src");
	if(!img.src && url){
		img.src = url;
	}
	});
}
  
function getAbsPoint(o) {
    var x = o.offsetLeft;
    var y = o.offsetTop;
    while (o = o.offsetParent) {
        x += o.offsetLeft;
        y += o.offsetTop
    }
    return {
        'x': x,
        'y': y
    };
}
  
function bindEvent(obj,evt,fun)
{
     if(window.addEventListener){
           obj.addEventListener(evt, function(e){ fun(e);},false); 
     }else{
           obj.attachEvent('on'+evt,fun);
    }
}
  
function forEach (array, callback, thisObject) {
    if (array.forEach) {
        array.forEach(callback, thisObject)
    } else {
        for (var i = 0, len = array.length; i < len; i++) {
            callback.call(thisObject, array[i], i, array)
        }
    }
};
  

  
            http://www.cyfhw.top。