javascript preloading of any images not working in chrome

问题

I'm fairly new to web design, I've just created following website http://www.janewaltonwatercolours.co.uk, and apart from a couple of minor gliches its working on all browsers.

However, in Chrome, my javascript function for preloading images is not working (causing flicker for navigation bar images, amongst other things) and having tried everything and not coming across any answers on the web i'm slowly going mad......

Heres the relevant code:-

var navbarImages = new Array();
preload(navbarImages,"images/navbar/topbigdrophover.gif","images/navbar/topdrophover.gif","images/navbar/tophover.gif");

function preload() {
    var images = preload.arguments[0];

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

This works fine for all apart from Chrome - any ideas?

Any help greatfully received!

Mike

More details - nav bar flickers on hover suggesting Chrome doesnt preload images. This is backed up by big preview images not being preloaded on thumbnail gallery pages.

The main.css stylesheet is loaded when the page is first loaded, then depending on size of screen, a second stylesheet is loaded to suit the size of the screen. The second stylesheet doesn't affect nav bar though.

Code for nav bar in main.css:- (bit messy I know...)

nav {position: relative; margin: 0 auto; text-align: center; height: 35px; line-height: 35px; font-size: 16px;}

.top {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/back.gif);color:#ccc;}

.topbig {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/back.gif);color:#ccc;}

.topdropdown {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/topdrop2.gif) no-repeat right top;color:#ccc;}

.topbigdropdown {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/topbigdrop.gif) no-repeat right top;color:#ccc;}

.top:hover {color:#fff; background: url(../images/navbar/tophover.gif) no-repeat right top;}

.topbig:hover {color:#fff; background: url(../images/navbar/topbighover.gif) no-repeat right top;}

.topbigdropdown:hover {color:#fff; background:url(../images/navbar/topbigdrophover.gif) no-repeat right top;}

.topdropdown:hover {color:#fff; background:url(../images/navbar/topdrophover.gif) no-repeat right top;}

回答1:

Finally fixed!

This wasn't a problem with the code or css, its apparently a known problem with my version of Chrome. Basically, even if certain images/files are cached, Chrome still tries a if-modified-since GET request to server. So to fix, I've set the expiry times for cache filetypes using the .htaccess file to override this - i.e. ExpiresByType image/jpg "access plus 4 hours" http://code.google.com/p/chromium/issues/detail?id=102706

回答2:

Follow up:

I've looked at you fiddle and I can't say for sure the issue but I notice you are using js to change css files depending on the window size.

I'm guessing this is the issue. The css is loaded, the dom is loaded and then the js runs and you see the flicker when the new css is invoked.

You can solve this by using media type and media queries in your css. cf w3.org/TR/css3-mediaqueries and stackoverflow.com/a/996796/215752

I you used media queries then the css would be defined before the dom gets loaded and there should be no flicker.

There may also be an error in only one of your sizes -- with media types it is easy to force one for testing.

---

I don't see anything wrong with your code and I don't think this code is causing the flicker (I expect that is a CSS issue) but here is your code re-written using a more current style:

var navbarImages = [];
preload(navbarImages,
   ["images/navbar/topbigdrophover.gif",
    "images/navbar/topdrophover.gif",
    "images/navbar/tophover.gif"]);

function preload(inArray,pathList) {
  var images = inArray;

  for (index = 0; index < pathList.length; index++) {    
    images[index] = new Image();
    images[index].src = pathList[index];
  }
}

I don't see the reason for var images = inArray (could just use inArray) but I kept it consistent with your code, there are many ways to write code with this functionality.

I suggest posting a new question that goes into detail with the flicker issue you have with chrome -- I'm guessing with some details you can get to the heart of the real issue.

回答3:

You need to use arguments instead of preload.arguments to access the arguments passed to the function.

While using func.arguments should only cause a problem in strict mode, it might be completely disallowed in Chrome.

If fun is in strict mode, both fun.caller and fun.arguments are non-deletable properties which throw when set or retrieved

from https://developer.mozilla.org/en/JavaScript/Strict_mode#Making_eval_and_arguments_simpler

来源：https://stackoverflow.com/questions/8953243/javascript-preloading-of-any-images-not-working-in-chrome