자 바스 크 립 트 이미지 프 리 로드 기술 에 대해 이야기 합 니 다(상세 설명)

본 고 에서 언급 한 예비 로드 기술 은 주로 자바 script 으로 하여 금 그림 의 머리 데 이 터 를 신속하게 얻 게 하 는 크기 이다.미리 불 러 와 서 그림 크기 를 가 져 오 는 전형 적 인 예:

 
var imgLoad = function (url, callback) { 
var img = new Image(); 
img.src = url; 
if (img.complete) { 
callback(img.width, img.height); 
} else { 
img.onload = function () { 
callback(img.width, img.height); 
img.onload = null; 
}; 
}; 
}; 

onload 를 사용 하 는 방식 은 그림 이 불 러 올 때 까지 기 다 려 야 하 는 것 을 볼 수 있 습 니 다.그 속 도 는 칭찬 하지 못 합 니 다.웹 프로그램 은 데스크 톱 프로그램 과 구별 되 며 응답 속도 가 가장 좋 은 사용자 체험 입 니 다.속도 와 우아 함 을 동시에 얻 으 려 면 그림 사 이 즈 를 미리 얻어 야 합 니 다.어떻게 그림 을 불 러 오지 않 고 그림 사 이 즈 를 얻 을 수 있 습 니까?10 여 년 의 인터넷 경험 을 통 해 브 라 우 저 는 그림 을 불 러 올 때 그림 이 먼저 땅 을 차지 한 후에 천천히 불 러 오 는 것 을 볼 수 있 습 니 다.그리고 대부분의 그림 은 width 와 height 속성 을 미리 설정 하지 않 았 습 니 다.브 라 우 저 는 그림 의 머리 데 이 터 를 얻 을 수 있 기 때 문 입 니 다.이 를 바탕 으로 자 바스 크 립 트 를 사용 하여 정시 에 그림 의 사이즈 상 태 를 탐지 하면 그림 의 사이즈 가 준 비 된 상 태 를 알 수 있다.실현 코드(2011-03-11 업데이트):2011-03-12 업데이트:타이머 만 사용 하고 성능 을 최적화 합 니 다

 
/*! 
* img ready v0.3 
* http://www.planeart.cn/?p=1121 
* TangBin - MIT Licensed 
*/ 
//             
// @param {String}      
// @param {Function}           (  1  width；  2  height) 
// @param {Function}           (  ) 
(function () { 
var list = [], intervalId = null, 
tick = function () { 
var i = 0; 
for (; i < list.length; i++) { 
list[i].end ? list.splice(i--, 1) : list[i](); 
}; 
!list.length && stop(); 
}, 
stop = function () { 
clearInterval(intervalId); 
intervalId = null; 
}; 
this.imgReady = function (url, callback, error) { 
var check, end, width, height, offsetWidth, offsetHeight, div, 
accuracy = 1024, 
doc = document, 
container = doc.body || doc.getElementsByTagName('head')[0], 
img = new Image(); 
img.src = url; 
if (!callback) return img; 
//        ，          
if (img.complete) return callback(img.width, img.height); 
//          ，           
div = doc.createElement('div'); 
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden'; 
div.appendChild(img) 
container.appendChild(div); 
width = img.offsetWidth; 
height = img.offsetHeight; 
//           
img.onload = function () { 
end(); 
callback(img.width, img.height); 
}; 
//          
img.onerror = function () { 
end(); 
error && error(); 
}; 
//            
check = function () { 
offsetWidth = img.offsetWidth; 
offsetHeight = img.offsetHeight; 
if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > accuracy) { 
end(); 
callback(offsetWidth, offsetHeight); 
}; 
}; 
check.url = url; 
//           
//        ，  IE     
end = function () { 
check.end = true; 
img.onload = img.onerror = null; 
div.innerHTML = ''; 
div.parentNode.removeChild(div); 
}; 
//                         
//              
//               ，          
!check.end && check(); 
for (var i = 0; i < list.length; i ++) { 
if (list[i].url === url) return; 
}; 
if (!check.end) { 
list.push(check); 
if (!intervalId) intervalId = setInterval(tick, 150); 
}; 
}; 
})(); 

간단 하지 않 습 니까?이러한 방식 으로 촬영 등급 의 사진 사 이 즈 를 얻 는 속 도 는 흔히 onload 방식 의 몇 십 여 배 이 고 웹 에 대해 서 는 보통(800)이다.×600 내)탐색 단계 의 그림 은 초 살 효과 에 도달 할 수 있다.자,즐 거 운 데모 감상 하 세 요.  http://demo.jb51.net/js/2011/imgready/(테스트 를 통과 한 브 라 우 저:Chrome,Firefox,Safari,Opera,IE6,IE7,IE8)