CODEWITHSUNDEEP
javascriptjquery
Oto Shavadze
Oto Shavadze

Reputation: 42863

onload for div tag

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?

Upvotes: 2

Views: 11305

Answers (4)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382474

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

  1. to check if the image is loaded (check if (img.width))
  2. 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
});

Upvotes: 1

Lowkase
Lowkase

Reputation: 5699

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

Upvotes: 1

Andrea Turri
Andrea Turri

Reputation: 6500

.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/

Upvotes: 1

karim79
karim79

Reputation: 342785

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.

Upvotes: 2

Related Questions