HTML5 Image preloading

Question

I am using the following:

 window.addEventListener("load", pageFullyLoaded, false);

function pageFullyLoaded(e) {
// run animation instructions/function here
}

So the time all objects are in the DOM, images, scripts etc have finished loading my animation instructions can be fired.

My questions now is in regards to image preloading: In my CSS I have been using the following:

 body::after {
 content: url ("sprite.png");
 display: none;
 }

However, I am not really clear as to what the difference is in using or not using it, if the load event in the JS already waits on all the images to be available before the animation takes place? Is there a benefit in using this in the CSS?

Answer 1

The load event doesn't care about CSS. They may or may not be loaded by the time the load event fires; they may or may not be "lazy-loaded" only on request.