Detect when everything is loaded after change of innerHTML

Question

I'm using this code to change the content of an div

mydiv.innerHTML = "html code with text and images";

Is there some events I can use to get a notification when everything is loaded? (no matter if there is no or many images )

I guess I could go through all child elements and addeventlisteners to them, but wish there is some other way.

Your question is unclear to me: do you want the event to be triggered when the contents of the `div` are loaded or when the whole page is loaded? — , Sep 18 '17 at 14:03
Possible duplicate of [assign event to div when it has loaded fully](https://stackoverflow.com/questions/4160614/assign-event-to-div-when-it-has-loaded-fully) — lukaleli, Sep 18 '17 at 14:05
Possible duplicate of [How to detect when innerHTML is complete](https://stackoverflow.com/questions/11513392/how-to-detect-when-innerhtml-is-complete) — Feras Al Sous, Sep 18 '17 at 14:06

caramba · Accepted Answer · 2022-03-07T06:50:57.460

Maybe something like this, just to give you an idea in vanilla javascript

var updateContent = function(element, content) {

    element.innerHTML = content;
    var images = element.querySelectorAll('img');
    var loadedItems = 0;
    var totalItems =  images.length;
    
    var loaded = function() {
        loadedItems++;
        
        console.log('loaded item: ' + loadedItems);

        if(loadedItems == totalItems) {
            element.classList.add('load-completed')
            console.log('finished loading all images');
        }
    };
    
    for(var i=0; i < totalItems; i++){
        if(images[i].complete) {
            loaded();
        } else {
          images[i].addEventListener('load', loaded);
          images[i].addEventListener('error', function() {
            console.log('error');
          });
        }
    }
}

updateContent(
     document.querySelector('.my-div'),
    '<h1>hello world<\h1><img src="https://picsum.photos/id/237/200/300"><img src="https://picsum.photos/id/1/200/300">'
);

.my-div {
   border:solid 5px orange;
}

.my-div img {
    width: 300px;
    height: 200px;
}

.load-completed {
    border: dashed 5px green;
}

<div class="my-div"></div>

Thank you for this. I guess I have to do it this way, I was just hoping there was some kind of event I could subscribe to, so I would be notified when its done. Somethin like the load event when the page has loaded, but for "dom changes" — Mr Zach, Sep 18 '17 at 19:42

score 0 · Answer 2 · answered Sep 18 '17 at 14:04

Edit 2012 live The live method is deprecated as of jQuery 1.7.0.

The .on() event is now recommended for attaching event handlers.

This replaces .bind(), .delegate(), and .live().

See the docs: http://api.jquery.com/on/

Original Answer

i think jQuery .live() event might be what you're looking for.

try this

  mydiv.live('load', function () {
     //code here
 });

Detect when everything is loaded after change of innerHTML

2 Answers2