javascript preloading of any images not working in chrome - Stack Overflow

admin管理员组

文章数量:1296257

I'm fairly new to web design, I've just created following website , 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 ing 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;}

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 ing 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;}

• javascript
• image
• google-chrome
• preload

Share Improve this question Follow edited Jan 21, 2012 at 16:43 Hogan 70.5k1010 gold badges8282 silver badges119119 bronze badges asked Jan 21, 2012 at 13:15 MWaltonMWalton 10111 silver badge66 bronze badges 3

• I don't think this is the code that would cause your images to flicker. What exactly is the problem / symptoms you are experiencing? – Hogan Commented Jan 21, 2012 at 13:21
• Quick question: what are you doing then with those images? I guess some kind of slider/gallery? Then it's clear what the problem is. – dfsq Commented Jan 21, 2012 at 14:06
• 1 Use arguments instead of preload.arguments – ThiefMaster Commented Jan 21, 2012 at 14:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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./p/chromium/issues/detail?id=102706

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/TR/css3-mediaqueries and stackoverflow./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.

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 pletely 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/en/JavaScript/Strict_mode#Making_eval_and_arguments_simpler

本文标签： javascript preloading of any images not working in chromeStack Overflow