Preloading images, still getting flicker

Question

I have about 30-40 images that I'm currently attempting to reload. However, I still get this "flicker" when I hover over a image. The images disappear for a couple of milliseconds and then comes back.

        var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image();
                images[i].src = preload.arguments[i];
            }
        }
        preload(
            "/../../regular.png",
            "/../../hover.png"
        );

This is the function I am currently using, is it something wrong with the code above or could it be another issue?

Answer 1

Your function has an error: you need to access the arguments object directly, not as a property of the function. Try it like this:

        function preload() {
            for (i = 0; i < arguments.length; i++) {
                images[i] = new Image();
                images[i].src = arguments[i];
            }
        }

According to MDN, the syntax you are currently using (preload.arguments) is deprecated and won't work in all browsers.

(If you check your browser's JS console you should see an error reported, and because of the error for loop wouldn't run so the images wouldn't preload.)

Answer 2

I'm not sure you can avoid the flickering on hover even when preloading the images like this. I guess the browser still has to load them from disk, and that's what's causing the delay of a couple of milliseconds.

A better way would be to use CSS sprites. See for instance this page, under Image Sprites - Hover Effect you'll find an example of using sprites for hover effects.