0

onload要素が完全にロードされた後に呼び出される関数について聞いたことがあります。グラフィックや画像の場合、画像がブラウザに表示されるまで待つということですか？

<body onload="foo()">...
     <img onload="bar();"....

そうでない場合、すべてのグラフィックが描画され、ページに画像が表示されたときにイベントを取得する方法はありますか?

私の場合、それは 1600*1200 の jpeg 画像 1 つだけで、その上に描画します。しかし、描画を開始する前に画像を表示する必要があります.onloadイベントを使用しても、画像が表示される前に描画された線が表示されます.

4

7 に答える 7

2

はいbody onloadは、すべての画像 (およびその他のコンテンツ) がブラウザーにロード/表示されるまで待機します。そのimg onload特定の画像が読み込まれる/表示されるまで待機します

于 2012-05-22T13:15:59.093 に答える
1

画像には、complete読み込まれたときに true になるプロパティがあります。

たとえば、すべてがロードされているかどうかをテストします。

var allImagesLoaded = true;
$("IMG").each(function(){ allImagesLoaded &= $(this).attr("complete"); });
if(allImagesLoaded){ alert("Done!");}

画像は、load読み込みが完了するとイベントを発生させます

于 2012-05-22T13:20:07.893 に答える
1

画像が読み込まれるたびに 1 ずつ減少する画像のカウンターを保持しないのはなぜですか。0 に等しいかどうかを確認してから、別の関数を呼び出します。このようにして、すべての画像がロードされたときにやりたいことができます

$(function() {
    $('img').one('load',function() {
        // fire when image loads decrement the counter
        if counter ==0
        fireanotherfunction()

    });
});

上記のコードにより、目的を達成できます

于 2012-05-22T13:20:16.207 に答える
1

ここでjQuery Ready APIドキュメントを読むとき：

JavaScript は、ページのレンダリング時にコードを実行するためのロード イベントを提供しますが、このイベントは、画像などのすべてのアセットが完全に受信されるまでトリガーされません。

Soonloadは、すべてがロード (および表示) された後に起動されます。

于 2012-05-22T13:24:50.790 に答える
1

window.loadイベントを見る:

load イベントは、ドキュメントの読み込みプロセスの最後に発生します。この時点で、ドキュメント内のすべてのオブジェクトが DOM にあり、すべての画像とサブフレームの読み込みが完了しています。

これはまさにあなたが望むものです、私は信じています。

JQuery$(document).readyはあなたが望むものではありません:

コードが読み込まれたアセットに依存する場合 (たとえば、画像のサイズが必要な場合)、コードはload[イベントではなくready] イベントのハンドラーに配置する必要があります。

  • プレーンな JS を使用している場合window.loadは、それが必要です。
  • jQuery を使用している場合は、$(document).load.
于 2012-05-22T13:27:29.727 に答える
0

Android アプリの Web ビューを開発するのと同じ問題があります。ロードイベント (ウィンドウとイメージ要素の両方) とイメージ要素の完全な状態が発生するのが早すぎます。私の（svg）画像はまだ描画が終わっていないため、サイズの計算がうまくいきません。

私が見つけた唯一の回避策は、非常に短いタイマー (1 ミリ秒または 10 ミリ秒) です。考慮すべきそのようなイメージが1つしかないので、それは私にとってはうまくいきます。そして、画像データが既に読み込まれているときにこのタイマーを開始するので、この短い経過時間は、デバイスが画像を描画するのに十分な時間である必要があります。

window.addEventListener('load', function() {
    var img = document.getElementById('logo');

    window.setTimeout(function(){
        var imgRatio = img.naturalWidth / img.naturalHeight;
        var renderedWidth = parseInt(window.getComputedStyle(img).width.match(/(\d+)px/));
        console.log(renderedWidth, img.complete);
        if (renderedWidth < img.naturalWidth) {
            img.style.height = (renderedWidth / imgRatio) + 'px';
        }
    }, 1);
}

ウィンドウの読み込みイベントの代わりに、画像の読み込みイベントも機能するはずです。しかし、他の要素が私のイメージの描画に影響を与える可能性があるため、すべてを待つ方が安全であることがわかりました.

于 2015-06-08T12:32:57.343 に答える
0

jquery ready 関数を試す

$(document).ready(function(){

バー（）; });

うまくいくかどうかはわかりませんが、試してみてください:D

于 2012-05-22T13:18:52.383 に答える