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

Solution 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

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

Solution 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