2

多数の画像を動的 DIV にロードしており、プリローダーを使用して画像を取得しています。

imageObj = new Image();
imageObj.src = imgpath + imgname;

これらの各イベントは、Firebug で確認および監視できる GET を作成します。

画像の名前とパスがわかっている場合、関連する XMLHttpRequest を監視して、GET が完了したかどうかを確認できますか?

このプロセスで .onload イベントに依存 (または使用) したくありません。

擬似は次のようになります...

if (imageObj.GET = 'complete')

誰もこれを経験したことがありますか？

編集1

Bart の助けのおかげで (以下を参照)、画像オブジェクトの配列を格納するように画像プリローダーを変更しました...

function imagePreLoader(imgname) {
    images[imgnum] = new Image();
    images[imgnum].src = imgpath + imgname;// load the image
    imgnum ++;
}

そして、他のすべての関数が実行されてコンテンツ DIV が作成された後、次のように image.complete 属性を使用しました...

var interval = setInterval(function () {
    imgcount = imgnum - 1; // because the imgnum counter ++ after src is called.
    ok = 1;

    for (i=0; i<imgcount; i++) {
        if (images[i].complete == false){
            ok = 0;
        }
    }

    if (ok == 1) {
        clearInterval(interval);
        showIndexOnLoad();
    }
}, 1000);

これは、すべての画像が完了するまで待機showIndexOnLoad()し、間隔関数から「ok」を取得したときにのみ関数をトリガーします。

すべての画像が思いどおりに表示されるようになり、GET が追いつくのを待つ必要がなくなりました。

image.complete属性を付けてくれた Bart さん、よくやった。

4

2 に答える 2

2

画像のプロパティを見completeて、画像が完全にロードされているかどうかを確認できます。

これが例です。

http://jsfiddle.net/t3esV/1/

function load (source) {
    var img = new Image();
    img.src = source;

    console.log('Loading ' + source);

    var interval = setInterval(function () {
        if (img.complete) {
            clearInterval(interval);
            complete(img);
        }
    }, 400);
};

function complete(img) {
    console.log('Loaded', img.src);
    document.body.appendChild(img);
};

注: この例では、何か問題が発生し、 にcomplete設定されていない場合に間隔をクリアできませんtrue。

アップデート

このプロパティを利用するために、単純なjQuery.preload プラグインimage.completeを作成しました。

于 2013-05-20T12:37:49.123 に答える
0

これは非常に興味深い問題であり、残念ながらこれに対する実際の解決策はありません。画像のloadイベントは、画像がレンダリングされ、ブラウザがその幅と高さを認識したときです。

あなたがしたいのは、タグ適用可能なreadystatechangeイベントです。残念ながら、これらをドキュメント以外の要素にバインドできるのは IE だけなので、これはオプションではありません。

それを回避できるプラグインもたくさんあります。非常にホットなものの 1 つはhttps://github.com/desandro/imagesloadedです。これには、すべてのブラウザーの違いを非常に効率的に処理できるという追加の利点があります。ただし、それはまだイベントに依存していloadます (そして、これがやりたいことを始める唯一の方法であると確信しています)。

于 2013-05-20T13:11:34.430 に答える