3

I want to preload all images on my page.

My page has some images used directly as links, i.e. as img tags within an a tag, as well as some images which are in the background-image property of some spans.

What's the best way to preload them all? I notice that a lot of the preload scripts seem to assume that the images will be loaded within image tags. For example, I've implemented this script: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml

But it doesn't make a difference on my page where certain spans when hovered over should have a new background. There's still a pause on my page when the user hovers over an element, before the right images background shows up.

Edit

I know about using sprites, my question is asking for a solution apart from sprites.

user961627
  • 12,379
  • 42
  • 136
  • 210
  • 1
    This question it is too "big". Have you searched on Google? There are many ways to answer you. – Guilherme Oderdenge Jul 03 '13 at 13:37
  • I have, but referring to preload functions like this: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml, it doesn't make a difference on my page where many images are used as span backgrounds. – user961627 Jul 03 '13 at 14:34
  • You could potentially "abuse" img tags using a similar js function and then use some css: "display: none;" on the elements so they load with the page itself. But then again, sprites would make this much simpler. – Jake Jul 03 '13 at 14:48
  • 1
    Try this http://stackoverflow.com/questions/476679/preloading-images-with-jquery. – Akshaya Raghuvanshi Jul 04 '13 at 00:21

1 Answers1

0

The following jQuery plugin was featured on http://www.unheap.com a while ago. Could this be of service?

http://nick-jonas.github.io/imageloader/

I do notice that the Github repository is "unavailable due to DMCA takedown", but maybe it could point you in the right direction.

Another solution might be this plugin:

https://github.com/sebarmeli/JAIL

chocolata
  • 3,258
  • 5
  • 31
  • 60