Pre-loading javascript of any images not working in chrome

Question

I am new to web design, I just created the following website http://www.janewaltonwatercolours.co.uk , and besides a few minor glyphs, it works on all browsers.

However, in Chrome, my javascript function for preloading images does not work (causing, for example, flickering for images on the navigation bar), and, having tried everything and not encountering any answers on the Internet, I'm slowly losing my mind .... ..

Has the appropriate 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 great for everyone except Chrome - any ideas?

Any help greatly appreciated!

Mike

Learn more - the navigation bar flickers on hover, suggesting that Chrome doesn't preload images. This is backed up by large preview images that are not preloaded onto the thumbnail gallery pages.

The main.css stylesheet is loaded the first time the page is loaded, then, depending on the screen size, the second stylesheet is loaded according to the screen size. The second style sheet does not affect the navigation bar.

Code for navigation 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;} 

Answer 1

Finally fixed!

This is not a problem with code or css, it is apparently a known issue with my version of Chrome. Basically, even if certain images / files are cached, Chrome is still trying to fulfill the request using a GET called-modified-since. Therefore, to fix it, I set the expiration time for cache file types using the .htaccess file to override this - for example, ExpiresByType image / jpg "access plus 4 hours" http://code.google.com/p/chromium/issues / detail? id = 102706

Answer 2

Following actions:

I looked at you and I can’t say for sure this problem, but I noticed that you are using js to change css files depending on the size of the window.

I guess this is a problem. Css loads, dom loads, and then js starts up and you see a flicker when a new css is called.

You can solve this problem using media type and media queries in your css. cf w3.org/TR/css3-mediaqueries and fooobar.com/questions/427515 / ...

I used media queries, then css will be detected before the dom loads, and there should be no flicker.

An error may also occur in only one of your sizes - with media types this is easy to do for testing.

---

I don’t see anything wrong with your code, and I don’t think this code causes flickering (I expect this is a CSS problem), but here is your code rewritten using a more modern 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 a reason for var images = inArray (it can just use inArray), but I saved it according to your code, there are many ways to write code with this functionality.

I suggest publishing a new question that is discussed in detail with the flickering problem you have with chrome - I guess some details that you can get at the heart of the real problem.

Answer 3

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

When using func.arguments , only the issue in strict mode should be caused, it can be completely prohibited in Chrome.

If fun is in strict mode, then both fun.caller and fun.arguments are non- fun.arguments properties that are generated when installing or restoring

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