Home/ Questions/Q 6809681
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:06:53+00:00

I’m using document.images to load images when a visitor first visits the website. The

  • 0

I’m using document.images to load images when a visitor first visits the website. The reason is because I have a few different areas which have rollover images. Before I switch over to using CSS sprites (modifying a lot of work), I’m going to ask here.

So I’m preloading images with this:

images = new Array();

if (document.images) {
    images.push(preloadImage("http://website.com/images/myimg.png", 300, 200));
}

function preloadImage(src, x, y) {
    var img = new Image(x, y);
    img.src = src;
    return img;
}

And according to Chrome’s “resource” panel, this is working just fine. Even after pressing CTRL+F5, the images listed in the JS are downloaded.

HOWEVER, they are not used. If I hover over an element in one of my three scripts, the image is downloaded a second time. Derp?

I assume that when preloading images this way, you’re supposed to put that image array to use. I thought the browser would be smart enough to say “Hey, this is the same image, let’s use it twice” but apparently not.

So is this correct? Do I need to rewrite my programs to preload images individually? I know it doesn’t sound hard, but it’s really not designed for that.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is not really an answer to your question, but I proprose a different solution. Put all the images you need to preload inside a div that is hidden from the user. I know, I know, this i not as elegant, but it should work just fine. 🙂

    <div style="display: none;">
    <img src="http://website.com/images/myimg.png" alt=""/>
    ...
</div>
    • 0