JavaScript画像プリロード技術についてもう一度話しましょう（詳細デモ）_JavaScriptスキル

この記事で説明したプリロード技術は主に、JavaScript が画像ヘッダー データのサイズを迅速に取得できるようにします。

プリロードを使用して画像サイズを取得する一般的な例:

コードをコピーします コードは次のとおりです。 :

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); onload = null;
};
};


onload を使用すると、イメージがロードされるのを待つ必要があり、その速度は向上しません。

Web アプリケーションはデスクトップ アプリケーションとは異なり、応答速度が最高のユーザー エクスペリエンスです。速度と美しさを両立したい場合は、事前に画像サイズを取得する必要があります。画像を読み込む前に、どのようにして画像サイズを取得すればよいでしょうか。
10 年以上のインターネット経験から言えることは、ブラウザが画像をロードするとき、画像は最初に土地の一部を占有し、その後ゆっくりとロードされることがわかります。また、ここにある画像のほとんどには幅と高さが事前に設定されていません. 属性。ブラウザは画像のヘッダー データを取得できるため。これに基づいて、JavaScript を使用して画像のサイズステータスを定期的に検出するだけで、画像サイズの準備完了ステータスを知ることができます。
実装コード (2011-03-11 更新):
2011-03-12 更新:

パフォーマンスを最適化するために特定のタイマーのみを使用します

コードをコピー コードは次のとおりです:

/*!

* img Ready v0.3
* http ://www .planeart.cn/?p=1121
* TangBin - MIT ライセンス
*/
// 画像ヘッダー データ読み込み準備完了イベント
// @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; // 画像がキャッシュされている場合は、キャッシュされたデータを直接返します
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 !== 幅 || offsetHeight !== height || offsetWidth * offsetHeight > 精度) {
callback(offsetWidth, offsetHeight);
};
check.url = url;
// 操作が完了したらクリーンアップします
// IE のメモリ リークを避けるために要素とイベントを削除します
end = function () {
check.end = true;
img.onload = img.onerror = null;
div.parentNode.removeChild(div); >// 画像がプレースホルダーであるかどうかを検出します 関数は定期的に実行するためにタイマー キューに追加されます
// 同じ画像に追加される検出器は 1 つだけです
// タイマーは 1 つだけ表示できますブラウザのパフォーマンスの低下を軽減する時間
!check.end && check( );
for (var i = 0; i if (list[i].url = == url) return;
if ( !check.end) {
if (!intervalId) = setInterval(tick, 150); 🎜>};
})() ;


とても簡単ですね。この方法で写真レベルの写真サイズを取得する速度は、多くの場合 onload 方式の数十倍であり、通常の Web 閲覧レベルの写真 (800×600 以内) に対してフラッシュ セール効果を実現できます。
それでは、楽しいデモをご覧ください:
http://demo.jb51.net/js/2011/imgready/

(テストされたブラウザ: Chrome、Firefox、Safari、Opera、IE6、 IE7、IE8)
差出人:: Tang Bin