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

There are two event listeners DOMContentLoaded and load. The load event fires when all files have finished loading from all resources, including ads and images. The images are rendered during download, so this should be what you are looking for.

See the demo here

Answer 2

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: <img src=".." onload="alert('image 1 is loaded!')" />

Answer 3

You can add .load() to each image and then simply check when all images are loaded by declaring a variable.