45

Web アプリでは、DOM ツリーに動的に追加される多数の高解像度画像を操作する必要があります。それらは事前に読み込まれてから、ページに追加されます。

そのような画像の読み込みがいつ終了したかを検出することは 1 つのことです。これにはloadイベントを使用しますが、Javascript を使用してブラウザ内でレンダリングが終了したことを検出するにはどうすればよいですか? 高解像度の画像を扱う場合、実際のペイント プロセスには多くの時間がかかるため、いつ終了するかを知ることが非常に重要です。

4

5 に答える 5

0

mdnから、

MozAfterPaint イベントは、コンテンツが画面に再描画されるとトリガーされ、再描画された内容に関する情報を提供します。主にパフォーマンスの最適化を調査するために使用されます

レンダリングされたイメージのパフォーマンスを測定するためにこれを行っていることを願っています。

于 2014-07-02T13:27:50.280 に答える
-1

更新: このアプローチは使用しないでください - 画像のサイズがデフォルト以外に設定されている場合は機能しません

要素の高さを auto (固定幅) に設定し、タイムアウトを使用して、要素の寸法が画像の自然な寸法と一致するかどうかをチェックし続けることができます。これは最善の解決策ではありませんが、ロード後ではなくレンダリング後に本当に何かをする必要がある場合は、良いオプションです。

多かれ少なかれ、それはどのように見えるかです:

//this is NOT a real code
function checkIfRendered(img, onRender) {
    var elRatio = img.width() / img.height();
    var natRatio = img.naturalWidth / img.naturalHeight;

    if (elRatio === natRatio)
        onRender();
    else {
        setTimeout(function() {
            checkIfRendered(imgEl, onRender)
        }, 20);
    }
}

img.onload(checkIfRendered(img, function() { alert('rendered!'); }));
于 2014-04-04T11:19:04.943 に答える
-6

onloadタグのイベントが必要です<img>。例えば：

function loadImage () {
  alert("Image is loaded");
}
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">

ソース

画像が別の要素の背景である場合は、(単純な Ajax GET 要求を使用して) バックグラウンドで画像を読み込み、結果が返ってきたら、読み込まれた後に背景を設定します。

于 2013-01-29T08:24:45.667 に答える