자바스크립트 이미지 프리로딩 기술에 대해 다시 얘기해보겠습니다. (자세한 시연)_javascript 기술

이 기사에서 언급된 사전 로딩 기술은 주로 JavaScript가 이미지 헤더 데이터의 크기를 빠르게 얻을 수 있도록 해줍니다.

이미지 크기를 얻기 위해 사전 로드를 사용하는 일반적인 예:

코드 복사 코드는 다음과 같습니다. :

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


onload를 사용하려면 이미지가 로드될 때까지 기다려야 하며 속도는 칭찬할 수 없습니다.
웹 애플리케이션은 데스크톱 애플리케이션과 다르며 응답 속도가 최고의 사용자 경험입니다. 속도와 우아함을 모두 원한다면 이미지 크기를 미리 얻어야 합니다. 이미지가 로드되기 전에 어떻게 이미지 크기를 얻을 수 있습니까?

10년 이상의 인터넷 경험에 따르면 브라우저가 이미지를 로드할 때 이미지가 먼저 한 영역을 차지한 다음 천천히 로드되며 여기에 있는 대부분의 이미지에는 미리 설정된 너비와 높이가 없습니다. . 속성, 브라우저가 이미지의 헤더 데이터를 얻을 수 있기 때문입니다. 이를 바탕으로 이미지 크기 준비 상태를 알기 위해서는 자바스크립트를 사용하여 이미지의 크기 상태를 정기적으로 감지하기만 하면 됩니다.
구현 코드(2011-03-11 업데이트):
2011-03-12 업데이트:

성능 최적화를 위해 특정 타이머만 사용

코드 복사 코드는 다음과 같습니다. /*!* img Ready v0.3

* http ://www .planeart.cn/?p=1121

* TangBin - MIT Licensed
*/
// 이미지 헤더 데이터 로딩 준비 이벤트
// @param {String} 이미지 경로
// @param {Function} 크기를 가져오는 콜백 함수(매개변수 1은 너비를 받고 매개변수 2는 높이를 받습니다.)
// @param {Function} 오류 로드를 위한 콜백 함수(선택 사항)
( function () {
var list = [], IntervalId = null,
tick = function () {
var i = 0
for (; 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;// 이미지가 캐시된 경우 캐시된 데이터를 직접 반환
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; ;
if (offsetWidth !== 너비 || offsetHeight !== 높이 || offsetWidth * offsetHeight > 정확도) {
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 if (list[i].url = == url) return;
if ( !check.end) {
list.push(check)
if (!intervalId) Interval(tick, 150); 🎜>};
};
})() ;


아주 간단하지 않나요? 이런 방식으로 사진 수준의 사진 크기를 얻는 속도는 온로드 방식보다 수십 배 빠른 경우가 많으며, 일반 웹 브라우징 수준의 사진(800×600 이내)에 대해 플래시 세일 효과를 얻을 수 있습니다.
좋아요, 즐거운 DEMO를 시청하세요:
http://demo.jb51.net/js/2011/imgready/

(테스트된 브라우저: Chrome, Firefox, Safari, Opera, IE6, IE7, IE8)
출처:: Tang Bin