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 disappear when all images is loaded and rendered - so the user doesn't see the typical image loading and rendering of non cached images.

Is there an event in browsers for image rendering done I can catch, or is there any Javascript plugin out there that can do this?

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 disappear when all images is loaded and rendered - so the user doesn't see the typical image loading and rendering of non cached images.

Is there an event in browsers for image rendering done I can catch, or is there any Javascript plugin out there that can do this?

• javascript
• jquery
• html

• 1 From the jQuery ready() docs: "this event does not get triggered until all assets such as images have been pletely received."...seems $(document).ready() should do the trick :) – Clive Commented Nov 24, 2011 at 22:12
• On same doc it actually says that when working with images use the load() . But thanks for pointing me into this page anyway! – user920041 Commented Nov 24, 2011 at 22:31

3 Answers 3

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

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!')" />

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