I have an div with an id of doi, and I want to manipulate it with JavaScript when it is fully loaded (the manipulation uses the dimensions of the images which is not provided in the DOM).

What I tried:

document.getElementById('doi').onload = function(){
        console.log('Div of Interest is loaded');
    };

This didn't work because the division was probably loaded before I set the Event Handler. So for short, what needs to be done is the following:

• Check if the element is loaded
  • if so? -> fire callback function
  • if not? -> set an event handler with callback when fully loaded.

I have an div with an id of doi, and I want to manipulate it with JavaScript when it is fully loaded (the manipulation uses the dimensions of the images which is not provided in the DOM).

What I tried:

document.getElementById('doi').onload = function(){
        console.log('Div of Interest is loaded');
    };

This didn't work because the division was probably loaded before I set the Event Handler. So for short, what needs to be done is the following:

• Check if the element is loaded
  • if so? -> fire callback function
  • if not? -> set an event handler with callback when fully loaded.

• javascript
• html
• events

Share Improve this question Follow edited Apr 10, 2014 at 18:27 howderek 2,2441515 silver badges2424 bronze badges asked Apr 10, 2014 at 18:20 Nicky SmitsNicky Smits 3,14844 gold badges2222 silver badges2727 bronze badges 7

• Might need some sort of timing mechanism to see if the div is in flux or not. – Travis J Commented Apr 10, 2014 at 18:24
• I don't know what that means :$ - native dutch speaker here – Nicky Smits Commented Apr 10, 2014 at 18:25
• Go orange! :P Basically what I was saying is perhaps use a setTimeout which monitors the content inside of the div, and when it hasn't changed for a certain amount of time then you can log the loaded message. If it has changed, then recurse the function with the setTimeout to continue monitoring – Travis J Commented Apr 10, 2014 at 18:27
• Under what conditions is the div considered to be "loaded"? – Travis J Commented Apr 10, 2014 at 18:28
• Hmm.. i'll keep it in mind. Thx for explaining it ;) – Nicky Smits Commented Apr 10, 2014 at 18:28

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

Pure javascript: jsFiddle Demo Using jQuery: jsFiddle Demo

(The demos include some setup which is just filler to show changing content)

To expand on the notion (only in rare cases) of using timers to monitor an element's contents. The content to be observed would more than likely be a bination of its text, html, width, and height. Here is one way to monitor those:

javascript

function monitor(element,callback){
 var self = element;
 var h = self.clientHeight;
 var w = self.clientWidth;
 var txt = self.innerText;
 var html = self.innerHTML;
 (function flux(){
    setTimeout(function(){
        var done = 
          h == self.clientHeight &&
          w == self.clientWidth &&
          txt == self.innerText &&
          html == self.innerHTML;
        if( done ){
         callback();
        }else{
         h = self.clientHeight;
         w = self.clientWidth;
         txt = self.innerText;
         html = self.innerHTML;
         flux();
        }
    },250);
 })()
};

jQuery extension

$.fn.monitor = function cb(callback){
 var set = this.first();
 var h = set.height();
 var w = set.width();
 var txt = set.text();
 var html = set.html();
 (function flux(){
    setTimeout(function(){
        var done = 
          h == set.height() &&
          w == set.width() &&
          txt == set.text() &&
          html == set.html();
        if( done ){
         if( $.isFunction(callback) )callback();
        }else{
         h = set.height();
         w = set.width();
         txt = set.text();
         html = set.html();
         flux();
        }
    },500);
 })()
};

For an image, you can check its width property. If it's non-zero, then the image has either loaded, or at least loaded enough that its dimensions are known.

You maybe can use the transitionend event if the dimensions are your measurement unit.

Set up a CSS transition for that element (using JS) and bind an event listener to that element. If you use plain JS you have to repeat the addEventListener calls with vendor prefixes.

#doi {
     -webkit-transition: width 0s linear;
             transition: width 0s linear;
}

JS:

var afterWidthChange = function( event ) {
    var doi = event.target;

    console.log( 'The width of #doi has changed.', doi );
};

document.getElementById( 'doi' ).addEventListener( 'transitionend', afterWidthChange, false );
document.getElementById( 'doi' ).addEventListener( 'webkitTransitionEnd', afterWidthChange, false );

There is a lib/polyfill for older browsers too.