4

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;}
Hogan
  • 69,564
  • 10
  • 76
  • 117
MWalton
  • 101
  • 1
  • 6
  • 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 Jan 21 '12 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 Jan 21 '12 at 14:06
  • 1
    Use `arguments` instead of `preload.arguments` – ThiefMaster Jan 21 '12 at 14:09

3 Answers3

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

MWalton
  • 101
  • 1
  • 6
1

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.

Community
  • 1
  • 1
Hogan
  • 69,564
  • 10
  • 76
  • 117
  • Thanks Hogan - I agree the first line of function can be removed. I've added more details to the original post at the top. Interestingly, I've just tried it on Chrome on my girlfriends laptop (yes - I'm a web designer and I've got a girlfriend!) and the flicker wasn't there?! Other images preloaded correctly as well. So maybe a problem with my Chrome settings? I only downloaded Chrome a couple of weeks ago and not changed any settings so seems very odd – MWalton Jan 21 '12 at 15:16
  • @Hogan another refactoring would be to return the array of images from preload instead of passing in an array to use. Index starts at zero, so it already assumes that it is adding images to an empty array. – Douglas Jan 21 '12 at 15:20
  • @MWalton - It could be something simple like font issues. Try to make the hover as EXACTLY the same as the non-hover. For example, in the posted code, one has a `font-size` and one does not. This could cause a flicker if the default font is different (as some not needed font-size recalc happens for example). If you make the hover as exact as you can you should see the flicker go away. Still happening -- post example on jsfiddle and we'll solve it. – Hogan Jan 21 '12 at 16:47
  • @Douglas - This was exactly my point with the "there are many ways" comment in my answer. I was just showing a simpler way to do exactly the same functionality. Not a reference implementation. – Hogan Jan 21 '12 at 16:48
  • don't forget `var` for `index` – Matt Greer Jan 21 '12 at 17:02
  • @Hogan - copied the hover exactly same as non-hover and I still get the flicker. I've made a fiddle at http://jsfiddle.net/MWalton/7K28T/1/ but unsure how to add images to it, so can't see flicker in action. Added large.css document to the bottom of main.css document in the CSS panel. Good luck if you can make sense of it all! – MWalton Jan 22 '12 at 12:28
  • @MWalton - you just add a fully qualified name to every `img` `src` tag -- for example don't use `/images/pic.png` use `http://myservername/images/pic.png`. – Hogan Jan 22 '12 at 14:01
  • @Hogan - cheers, I'll do that now. sorry, its the first time I've used jsfiddle – MWalton Jan 22 '12 at 14:10
  • @Hogan - http://jsfiddle.net/MWalton/7K28T/2/ - I've added the relevant images (just the navbar) and yes, the flicker is displaying for me still when viewed using chrome – MWalton Jan 22 '12 at 14:30
  • @MWalton - I don't see it, can you tell me when it happens... onload or on hover? – Hogan Jan 22 '12 at 15:39
  • @Hogan - It happens on hover, but as I said it looked fine on my girlfriends laptop which sounds like the same for you – MWalton Jan 22 '12 at 16:56
  • @Hogan - thanks for the follow up. On jsfiddle, I pasted the main.css and large.css together so there is only one css call and I still see the flicker. I've played with media queries before and didn't lack the lack of support from some browsers but I might have a look and see if this helps for this problem. Thanks again! – MWalton Jan 23 '12 at 11:04
0

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

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636