onload for div tag

Question

I have div tag, after some event, I insert (change old content) into this tag, several images and also texts, for example:

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

I want, that after load "mydiv" tag full content, alert("mydiv contonet is loaded"). That is, some like this:

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

Tell please, how can this make?

score 2 · Answer 1 · answered Sep 10 '12 at 14:17

Divs have no onload event. The best you can do is something like this:

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

...unless you can/want to specifically address stuff within the div which does support onload, like images.

score 1 · Answer 2 · answered Sep 10 '12 at 14:19

.html() is a synchronous operation. The actual updating of the DOM depends on what your html content is. If you have <img> or <iframe> tags, they will take time to load. The next statement following the .html() should immediately see the new html contents.

You can have a callback using .load()

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

score 1 · Answer 3 · answered Sep 10 '12 at 14:19

1

Preload (http://stackoverflow.com/questions/476679/preloading-images-with-jquery) your images then you won't have to worry about this use case.

answered Sep 10 '12 at 14:19

Lowkase

5,631
2
30
48

Denys Séguret · Answer 4 · 2012-09-10T14:52:22.653

You'll have to check the loading of the images you have in your div as there is no callback usable in your case.

The typical way is, for each image

to check if the image is loaded (check if (img.width))
add a onload callback on this image

As you have multiple images, you might want a function like this one :

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();
}

that you can call like this :

onLoadAll(imagesObj, function(){
     // do something with imagesObj when all images are loaded
});

onload for div tag

4 Answers4