トラック画像読み込みエフェクトコード解析_JavaScriptスキル

目的
イメージの読み込みプロセス中に、イメージがいつ正常に読み込まれるか、失敗/タイムアウトするかを定義し、実行を保証するコールバック関数を提供します。

動機
ネイティブ JavaScript は、Image オブジェクトの onload および onerror 登録イベントをすでに提供しています。ただし、ブラウザのキャッシュなどの影響により、ユーザーが戻るボタンを使用したり、ページを更新したりしたときに、onload イベントが安定してトリガーされないことがよくあります。私が開発したフォトアルバムシステムでは、ページの変形を避けるために写真をカスタムサイズで表示できるようにしたいと考えています。たとえば、最大幅が 500px を超えないようにして、幅が 500px 未満の写真は元のサイズで表示されるようにしたいと考えています。サイズ。 CSS2 は、この目標の達成に役立つ max-width 属性を提供します。しかし、残念ながら、千ドルの損害を被った IE6 はサポートされていません。


IE6 が補正する 1 つの方法は、img.onload イベントを登録し、画像が読み込まれた後に自動的に画像のサイズを変更することです。次のコードは、有名な Discuz! フォーラム システムのバージョン 4.1 で表示される画像の処理から取得したものです。


onload="if(this.width>screen.width) *0.7) {this.resize=true; this.width=screen.width*0.7;
this.alt='ここをクリックして新しいウィンドウを開きますCTRL マウスホイールで拡大/縮小';}"
onmouseover= "if(this.width>screen.width*0.7) {this.resize=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);">

上記の通り、ブラウザはイベント処理関数が実行されることを保証しません。したがって、画像読み込みプロセスを追跡し、set コールバック関数を実行するには、より安定した方法が必要です。

実装
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 ミリ秒ごとにイメージの読み込みステータスを確認し、ステータスに基づいて options パラメーターで定義されたコールバック関数を実行します。





varloader = 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'));

上記のコードは、画像の実際の幅が 500 ピクセルを超えると、画像が最初に 100 ピクセルで表示されるように定義しています。 500px として定義されている場合は、元のサイズが表示されます。画像が存在しない場合、または読み込みがタイムアウトした場合（タイムアウトは 30 秒）、エラー画像が表示されます。

同様に、ImageLoader のコールバック関数を使用して、必要に応じて効果をカスタマイズできます。たとえば、デフォルトでは読み込みが表示され、最初に画像の読み込みが完了した後に元の画像が表示されます。グレースケールで表示し、読み込み完了後に明るさを戻すなど。例:



//scriptaculous Effects.js が必要
varloader = new ImageLoader({
onInit: function(img) {
Element.setOpacity(img) , 0.5); //デフォルトレベル5の透明度
},
onLoad: function(img) {
Effect.Appear(img) //元の画像表示を復元します
}
} );


添付の例には、例として pconline ピクチャを使用したテストが含まれています。この例では、最新のプロトタイプ 1.5.0_rc1 が使用されていることに注意してください。

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>