2

私はdivタグを持っています。いくつかのイベントの後、このタグにいくつかの画像とテキストを挿入（古いコンテンツを変更）します。次に例を示します。

    $("#some_button").on("click", function () {
        $("#mydiv").html("<div>aaaa</div><img src='1.jpg'><div>bbb</div><img src='2.jpg'>");
    });

「mydiv」タグの完全なコンテンツをロードした後、アラート（「mydiv contonet is loaded」）が必要です。つまり、次のようなものがあります。

$("#mydiv").onload( function () {
     alert("mydiv contonet is loaded");
});

教えてください、これはどのように作ることができますか?

4

4 に答える 4

2

div には onload イベントはありません。あなたができる最善のことは、次のようなものです：

<div id="myDiv">I am a div</div>
<script>// do stuff with loaded div</script>

...画像など、 をサポートする div 内のものに具体的に対処できる/したくない場合を除きますonload。

于 2012-09-10T14:17:23.950 に答える
1

.html()同期操作です。DOMの実際の更新は、HTMLコンテンツが何であるかによって異なります。<img>またはタグがある場合は<iframe>、読み込みに時間がかかります。次のステートメントは、.html()すぐに新しいhtmlコンテンツを表示するはずです。

あなたはを使用してコールバックを持つことができます.load()

http://api.jquery.com/load/

于 2012-09-10T14:19:14.627 に答える
1

画像をプリロード（http://stackoverflow.com/questions/476679/preloading-images-with-jquery）すると、このユースケースについて心配する必要がなくなります。

于 2012-09-10T14:19:21.423 に答える
1

ケースで使用できるコールバックがないため、divにある画像の読み込みを確認する必要があります。

典型的な方法は、各画像に対してです

  1. 画像が読み込まれているかどうかを確認するには（チェックif (img.width)）
  2. この画像にonloadコールバックを追加します

複数の画像があるので、次のような関数が必要になる場合があります。

function onLoadAll(images, callback) {
    var n=0;
    for (var i=images.length; i-->0;) {
        if (images[i].width==0) {
            n++;
            images[i].onload=function(){
                if (--n==0) callback();
            };
        }
    }
    if (n==0) callback();
}

あなたがこのように呼ぶことができること：

onLoadAll(imagesObj, function(){
     // do something with imagesObj when all images are loaded
});
于 2012-09-10T14:20:06.507 に答える