Is there something like a ready event when an image in html is loaded and rendered?

Question

I am creating a webview app for iPad, and want to show a splashscreen until index file and a set of images is loaded and rendered.

I want this splashscreen to disap

Answer 1

I'll write it out for you:

loadedImages = 0;
timesChecked = 0;
checkInterval = 500;
maxLoadTime = 10000; // in miliseconds
window.onload = function() {
  for (var i = 0; i < document.getElementsByName('img').length; i++) {
    document.getElementsByName('img')[i].onload = function() {
      loadedImages++;
    }
  }
  intervalID = setInterval("checkSplash()", checkInterval);
}

function checkSplash() {
  timesChecked++;
  if (loadedImages >= document.getElementsByName('img').length || timesChecked * checkInterval >= maxLoadTime) {
    clearInterval(intervalID);
    // hide splash screen
  }
}

Enjoy :)

It's pretty simple actually: