트랙 이미지 로딩 효과 코드 분석_javascript 기술

목적
이미지 로딩 과정 중 이미지 로딩 성공, 실패/타임아웃 시점을 정의하고 실행을 보장하는 콜백 함수를 제공합니다.

동기 부여
네이티브 JavaScript는 이미 Image 객체에 대한 onload 및 onerror 등록 이벤트를 제공합니다. 그러나 브라우저 캐시 및 기타 요인의 영향으로 인해 사용자가 뒤로 버튼을 사용하거나 페이지를 새로 고칠 때 onload 이벤트가 안정적으로 실행되지 않는 경우가 많습니다. 제가 개발한 사진 앨범 시스템에서는 페이지 변형을 방지하기 위해 사진이 사용자 정의 크기에 따라 표시될 수 있기를 바랍니다. 예를 들어 최대 너비는 500px를 초과할 수 없으며, 500px보다 작은 너비의 사진은 원본으로 표시됩니다. 크기. CSS2는 이 목표를 달성하는 데 도움이 되는 max-width 속성을 제공합니다. 하지만 아쉽게도 수천달러의 피해를 입은 IE6에서는 이를 지원하지 않습니다.


IE6의 보상 방법 중 하나는 img.onload 이벤트를 등록하고 이미지가 로드된 후 자동으로 이미지 크기를 조정하는 것입니다. 다음 코드는 유명한 Discuz! 포럼 시스템 버전 4.1에서 표시된 이미지를 처리하는 과정에서 가져온 것입니다.


onload="if(this.width>screen.width *0.7) {this.reized=true; this.width=screen.width*0.7;
this.alt='새 창을 열려면 여기를 클릭하세요. CTRL 마우스 휠을 사용하여 확대/축소하세요.';}"
onmouseover= "if(this.width>screen.width*0.7) {this.reized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='새 항목을 열려면 여기를 클릭하세요. windownCTRL 확대/축소하려면 마우스 휠';}"
onclick="if(!this.resize) {return true;} else {window.open('http://img8.imagepile.net/img8/47104p155 .jpg');}"
onmousewheel="return imgzoom(this);">

위에서 언급했듯이 브라우저는 이벤트 처리 기능이 실행된다는 것을 보장하지 않습니다. 따라서 이미지 로딩 과정을 추적하고 설정된 콜백 함수를 실행하기 위해서는 보다 안정적인 방법이 필요합니다.

구현
image.complete 속성은 이미지 로딩 상태를 나타냅니다. 해당 값이 true이면 로딩이 성공한 것입니다. 이미지가 없거나 로드 시간이 초과되면 값은 false입니다. setInterval() 함수를 사용하여 이 상태를 정기적으로 확인하면 이미지 로딩 상태를 추적할 수 있습니다. 코드 조각은 다음과 같습니다.



ImageLoader = Class.create();
ImageLoader.prototype = {
초기화 : function(options) {
this. options = Object .extend({
timeout: 60, //60s
onInit: Prototype.emptyFunction,
onLoad: Prototype.emptyFunction,
onError: Prototype.emptyFunction
}, options | | {} );
this.images = [];
this.pe = new PeriodicalExecuter(this._load.bind(this), 0.02);
},
..... ...
}

Prototype의 PeriodicalExecuter 클래스를 사용하여 타이머를 생성하고, 20밀리초마다 이미지 로딩 상태를 확인하고, 상태에 따라 옵션 매개변수에 정의된 콜백 함수를 실행합니다.





var loader = new ImageLoader({
timeout: 30,
onInit: function(img) {
img.style을 사용하세요. width = '100px';
},
onLoad: function(img) {
img.style.width = ''
if (img.width > 500)
img.style .width = '500px';
},
onError: function(img) {
img.src = 'error.jpg' //힌트 이미지
}
}); .loadImage(document.getElementsByTagName('img'));

위 코드는 이미지가 처음에 100px로 표시되도록 정의합니다. 성공적으로 로드된 후 이미지의 실제 너비가 500px을 초과하면 강제로 표시됩니다. 500px로 정의되어야 하며, 그렇지 않으면 원래 크기가 표시됩니다. 이미지가 존재하지 않거나 로딩 시간이 초과되면(30초가 시간 초과됨) 오류 이미지가 표시됩니다.

마찬가지로 ImageLoader의 콜백 기능을 사용하여 필요에 따라 효과를 맞춤 설정할 수 있습니다. 예를 들어 기본적으로 로드가 표시되고, 이미지 로드가 먼저 완료된 후 원본 이미지가 표시됩니다. 그레이스케일로 표시되었다가 로딩이 완료된 후 밝기가 복원됩니다.예:



//need scriptaculous effect.js
var loader = new ImageLoader({
onInit: function(img) {
Element.setOpacity(img , 0.5); //기본 레벨 5 투명도
},
onLoad: function(img) {
Effect.Appear(img) //원본 이미지 표시 복원
}
} );


첨부된 예제에는 PConline 그림을 예로 들어 전체 코드와 테스트가 포함되어 있습니다.

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

로딩 실패 테스트




<script></script> <script></script><script> <BR>ImageLoader = Class.create(); <BR>ImageLoader.prototype = { <br><br> initialize : function(options) { <BR> this.options = Object.extend({ <BR> timeout: 60, //60s <BR> onInit: Prototype.emptyFunction, <BR> onLoad: Prototype.emptyFunction, <BR> onError: Prototype.emptyFunction <BR> }, options || {}); <BR> this.images = []; <BR> this.pe = new PeriodicalExecuter(this._load.bind(this), 0.02); <BR> }, <br><br> loadImage : function() { <BR> var self = this; <BR> $A(arguments).each(function(img) { <BR> if (typeof(img) == 'object') <BR> $A(img).each(self._addImage.bind(self)); <BR> else <BR> self._addImage(img); <BR> }); <BR> }, <br><br> _addImage : function(img) { <BR> img = $(img); <BR> img.onerror = this._onerror.bind(this, img); <BR> this.options.onInit.call(this, img); <BR> if (this.options.timeout > 0) { <BR> setTimeout(this._ontimeout.bind(this, img), this.options.timeout*1000); <BR> } <BR> this.images.push(img); <BR> if (!this.pe.timer) <BR> this.pe.registerCallback(); <BR> }, <br><br> <BR> _load: function() { <BR> this.images = this.images.select(this._onload.bind(this)); <BR> if (this.images.length == 0) { <BR> this.pe.stop(); <BR> } <BR> }, <br><br> _checkComplete : function(img) { <BR> if (img._error) { <BR> return true; <BR> } else { <BR> return img.complete; <BR> } <BR> }, <br><br> _onload : function(img) { <BR> if (this._checkComplete(img)) { <BR> this.options.onLoad.call(this, img); <BR> img.onerror = null; <BR> if (img._error) <BR> try {delete img._error}catch(e){} <BR> return false; <BR> } <BR> return true; <BR> }, <br><br> _onerror : function(img) { <BR> img._error = true; <BR> img.onerror = null; <BR> this.options.onError.call(this, img); <BR> }, <br><br> _ontimeout : function(img) { <BR> if (!this._checkComplete(img)) { <BR> this._onerror(img); <BR> } <BR> } <br><br>} <br><br>var loader = new ImageLoader({ <BR> timeout: 30, <BR> onInit: function(img) { <BR> img.style.width = '100px'; <BR> }, <BR> onLoad: function(img) { <BR> img.style.width = ''; <BR> if (img.width > 500) { <BR> img.style.width = '500px'; <BR> } <BR> }, <BR> onError: function(img) { <BR> img.src = 'http://img.pconline.com.cn/nopic.gif'; <BR> } <BR>}); <br><br>loader.loadImage(document.getElementsByTagName('img')); <br><br>/* <BR>var loader = new ImageLoader({ <BR> timeout: 30, <BR> onInit: function(img) { <BR> Element.setOpacity(img, 0.5); <BR> }, <BR> onLoad: function(img) { <BR> Effect.Appear(img); <BR> }, <BR> onError: function(img) { <BR> img.src = 'http://img.pconline.com.cn/nopic.gif'; <BR> } <BR>}); <BR>*/ <br><br>/* <BR>$A(document.getElementsByTagName('img')).each( <BR>function(img) { <BR> img.onload = function() { <BR> img.style.width = '300px'; <BR> } <BR>} <BR>); <BR>*/ <br><br></script>