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?

score 1 · Answer 1 · answered Dec 21 '13 at 11:42

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.

nnnnnn · Answer 2 · 2013-12-21T11:56:20.687

0

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.)

edited Dec 21 '13 at 11:56

answered Dec 21 '13 at 11:40

nnnnnn

147,572
30
200
241

First I though so too, but it’s actually possible to access the arguments as property of the named function, though I have never seen it before: http://jsfiddle.net/fP4Rs/ – David Hellsing Dec 21 '13 at 11:43
nnnnnn - Thanks for the response. Not sure how i would do this though, where should i put all my images if i do it your way? Thanks again. – Cheese Puffs Dec 21 '13 at 11:52
@David - I'd never seen or used it either, but after seeing your comment I looked it up at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments) - apparently it is deprecated and not supported by all browsers. (And sorry, I can't check your demo because jsfiddle doesn't work on my phone's browser.) – nnnnnn Dec 21 '13 at 11:52
@CheesePuffs - you'd still call the function exactly the same way. I'm just suggesting a small change in the function in the way you reference the _arguments_ object. – nnnnnn Dec 21 '13 at 11:54
@nnnnnn You’re right it’s deprecated and will throw an error in strict mode, but browser support seems legit so I guess it’s not the reason why the code is not working as expected. – David Hellsing Dec 21 '13 at 11:57
@David - There could be some other problem. If the OP tries this change and it doesn't help, and they confirm that no error is reported in the console, then I'll happily delete my answer and just add a comment above about the deprecated language feature. – nnnnnn Dec 21 '13 at 12:06
I'm not exactly sure whats happening over here. Maybe it's not a preloading issue, because i'm preloading about 30 images, but right now only one image is flickering. The same one, everytime. And its being preloaded. It's very random but I've seen more images flicker then this. I can't detect a difference with your change, as of right now. – Cheese Puffs Dec 21 '13 at 12:17

Preloading images, still getting flicker

2 Answers2