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 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?

From the [jQuery `ready()` docs](http://api.jquery.com/ready/): "this event does not get triggered until all assets such as images have been completely received."...seems `$(document).ready()` should do the trick :) — Clive, Nov 24 '11 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! — , Nov 24 '11 at 22:31

score 6 · Accepted Answer · edited Sep 15 '16 at 19:47

6

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

edited Sep 15 '16 at 19:47

Adam Prax

6,413
3
30
31

answered Nov 24 '11 at 22:15

Bakudan

19,134
9
53
73

score 2 · Answer 2 · edited Feb 11 '16 at 14:03

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

edited Feb 11 '16 at 14:03

joshcomley

28,099
24
107
147

answered Nov 24 '11 at 22:19

BronzeByte

685
1
7
11

This is actually a very bad idea, because when you mistype ONE single image url, visitors will not be able to pass the splash screen. You COULD make a timer that alternatively dismisses the splash screen after a period even tough not everything is loaded (due server problems or incorrect url) – BronzeByte Nov 24 '11 at 22:20
This works for a single image, my page has several images, and I need to know when everyone is loaded :) – Nov 24 '11 at 22:23
I made a complete solution, I hope you enjoy – BronzeByte Nov 24 '11 at 22:33

score -1 · Answer 3 · answered Nov 24 '11 at 22:16

-1

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

answered Nov 24 '11 at 22:16

Sal

1,657
12
9

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

3 Answers3

Linked