How to check if changes to innerHTML have completely loaded

Question

I'm changing the content of a div via javascript using myDiv.innerHTML = xmlHttp.responseText. xmlHttp.responseText might contain a few images which will be loaded after the div's innerHTML has been changed.

Is there any event which is fired on the div, document or window after those images have completed loading ie after innerHTML of an element has completely loaded?

possible duplicate of [javascript executing function after full image load](http://stackoverflow.com/questions/4100252/javascript-executing-function-after-full-image-load) — Bladepianist, May 29 '15 at 11:50
It's not a duplicate because it refers to change of attribute on a preexisting element. Over here new html content is being included inside a div. — Karan Jit Singh, May 29 '15 at 11:55
I'd say you're both right. The question is not a duplicate of this one, but the answer given should still actually be useful to you; you'll want to query for all images and add a load event to them. — Katana314, May 29 '15 at 13:16

score 3 · Accepted Answer · answered May 29 '15 at 14:20

Well, I went through your question several times again and I came up with this process :

http://jsfiddle.net/Bladepianist/oyv0f7ns/

HTML

<div id="myDiv">Click Me</div>
<div id="myDiv2">Watch</div>

I used two div so that you could observe the loading of differents images.

JS (No JQuery)

var myDiv = document.getElementById("myDiv");
var myDiv2 = document.getElementById("myDiv2");

var myWatcher = 0;

myDiv.onclick = function () {

    var myImage = "<img id='myImage' src='http://getbootstrap.com/assets/img/sass-less.png' style='max-width: 150px;' />";

    var myImage2 = "<img id='myImage2' src='http://getbootstrap.com/assets/img/devices.png' style='max-width: 150px;'  />";

    myDiv.innerHTML = myImage;
    myDiv2.innerHTML = myImage2;

    // Most important part. Get all the img tags AFTER div was modified.
    var myImg = document.getElementsByTagName("img");

    // Check if each img is loaded. Second img might be loaded before first.
    for (var i = 0; i < myImg.length; i++) {

        myImg[i].onload = function () {
            myWatcher++;

            if (myWatcher == myImg.length) {
                alert("All is loaded.");
                // Might want to call a function for anything you might want to do.
            }
        };
    }
};

In my example, I used a click event but the most important part is, of course, the capture of all your img element right after you modify your DOM.

The for loop allow the add an eventListener (here : onload) on each img so that you know when it's loaded.

I have a counter which is incremented when an img is loaded. When he is equal to myImg.length it means all's good.

PS (Edit) : Haven't tested on other browsers (just Chrome).

Hope it might help you, even by a little.

This solves most of my problems so I'll mark it as my answer. But what about images that are specified in the element's stylesheet? — Karan Jit Singh, May 29 '15 at 14:55
Sorry for the delay : Busy WE ^^". Anyway. I still tried looking at image in element stylesheet since I hadn't though about it when I wrote my answer but so far, I can't find anything. I think this problem deserve a complete question of its own. — Bladepianist, Jun 01 '15 at 07:20

score 0 · Answer 2 · answered May 29 '15 at 13:40

One way would be to search though responseText for <img> and add onload="function()". You could do that with responseText.replace(/<img/g,"<img onload=\"function\"").

As the comments on the question suggested, another way would be to loop through myDiv.getElementsByTagName("img") and add an event listener to the "load" event for each one.

Jo Oko · Answer 3 · 2015-05-29T13:55:27.253

-1

There is an event, which is fired after the images are completely loaded. So in your ajax request, you can set up an event listener:

xmlhttp.onreadystatechange=function() {

    if (xmlhttp.readyState==4 && xmlhttp.status==200) {

      // readyState==4 means "request finished and response is ready"
      // status==200 means "everything transferred correctly"

    }
}

edited May 29 '15 at 13:55

answered May 29 '15 at 13:02

Jo Oko

358
5
10

this doesn't answer the question. – avrahamcool May 29 '15 at 13:04

How to check if changes to innerHTML have completely loaded

3 Answers3