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 回答