onready/onload for document.innerHTML change

Question

I'm using iCanHaz.js to swap screens, but I need a function to fire once the new content has completed loading fully. I have been able to do this before by using a setTimeout of 0 to make the call asynchronous, but on pages with lots of images, this doesn't seem to be hitting soon enough.

function show_page(){
   document.getElementById('container').innerHTML = ich.artworks({
      variables : variables
   });
   window.setTimeout(function(){
       var midWidth = (document.body.offsetWidth/2) - window.innerWidth / 2;
      var midHeight = (document.body.offsetHeight/2) - window.innerHeight / 2;
      scrollTo( midWidth, midHeight);
   }, 0);
}

How can I delay this function until the height is known? Even if I do know the height, I cannot scroll to a point that is below the current height of the page, so I have to wait until the images are loaded if I do not know their height already.

Answer 1

You'd have to modify your template-based approach slightly, but if you create the images using new Image() you can use the onload events to determine when all the images have loaded and then set your dimensions.

Answer 2

There is a similar case in question:

How can I tell when changes to jquery html() have finished?

The proposed solution is to add a timeout of 1 (not 0) for the code to be executed after HTML rendering, as timed out code executes after JavaScript sole thread is done with its rendering stuff.

Hope that works for your case.