Preload Images?

Question

I have been looking into Preloading images with JQuery and came across this Preloading images with jQuery

Now can someone tell me, do I have to call the preloaded i

Answer 1

I preload a lot using CSS only. I don't like the jQuery versions because you have to wait for the library to be loaded first, and if they don't have JS enabled, or jQuery is delayed, they'll have noticeable image change delays on rollover.

If you need a callback when images have finished preloading, use JS/jQuery. Otherwise, use CSS.

This is just one method which uses :before, so has browser support limitations (< IE8). The good thing about this one is you dont need any extra HTML markup.

HTML

CSS

.logo {
    background:url(logo-1.png);
}

.logo:before {
    content: url(logo-2.png);
    width: 0;
    height: 0;
    visibility: hidden;
}

Another method would be to simply set background images to hidden elements on your page with the images you need to preload.

HTML

CSS

#preload-logo-2 {
    background: url(logo-2.png);
    height: 0;
    width: 0;
    visibility: hidden;
}