Images Examples

Please empty your cache for these tests and make sure caching is on, if your dev tools are open.

preload

This section should contain 5 images of different file formats being preloaded on document ready. After all images are preloaded, they should dynamically be placed here without triggering another request, but getting the corresponding image directly from cache. Between load and display there is a two second pause, so you can track the network activity in your dev tools showing, that the images are not loaded the moment they are displayed, but way before.

loaded

On reload this section should load six images. The first two are normal image loads of a standard image and a picture element (with picturefill).
The following two images are the same images again, which should now be delivered from cache, but should fire their callbacks nonetheless.
Additionally, at last we add the same images again, wait until they are definitively loaded and ready on the page and then set the load handler to see if the callback still fires.
So, in essence you should see six images (two different images), all being opaque after around two seconds, having a green border to indicate the load event has fired.