javascript预加载了任何不在chrome中工作的图像 [英] javascript preloading of any images not working in chrome

问题描述

我对网页设计相当陌生，我刚刚创建了以下网站 http：//www.janewaltonwatercolours。 co.uk ，除了一些小的gliches外，它还可以在所有的浏览器上运行。然而，在Chrome浏览器中，我的用于预加载图像的javascript功能无法正常工作（导致导航栏图像闪烁等），并且尝试了所有内容并且没有遇到任何问题在网上的答案我正慢慢地发疯......

继承人的相关代码： - $ / b
$ b

  var navbarImages = new Array（）; 
 preload（navbarImages，images / navbar / topbigdrophover.gif，images / navbar / topdrophover.gif，images / navbar / tophover.gif）; 
 
函数preload（）{
 var images = preload.arguments [0]; （i = 1; i< preload.arguments.length; i ++）{
 images [i-1] = new Image（）; 
 
。 
 images [i-1] .src = preload.arguments [i]; 
} 
} 
  

除Chrome之外， ？

获得任何帮助！

Mike

更多详细信息 - 导航栏在悬停时闪烁，表明Chrome不会预载图像。这是由大预览图像备份，而不是预先加载在缩略图库页面上。

main.css样式表在第一次加载页面时加载，然后根据大小屏幕上，加载第二个样式表以适应屏幕的大小。虽然第二个样式表不会影响导航栏。

main.css中的导航栏代码： - （有点麻烦，我知道...）

  nav {position：relative;保证金：0汽车; text-align：center; height：35px; line-height：35px; font-size：16px;} 
 
 .top {float：left;文字修饰：无;字体大小：16px的;字体重量：粗体;光标：指针;背景：url（../ images / navbar / back.gif）; color：#ccc;} 
 
 .topbig {float：left;文字修饰：无;字体大小：16px的;字体重量：粗体;光标：指针;背景：url（../ images / navbar / back.gif）; color：#ccc;} 
 
 .topdropdown {float：left;文字修饰：无;字体大小：16px的;字体重量：粗体;光标：指针;背景：url（../ images / navbar / topdrop2.gif）no-repeat right top; color：#ccc;} 
 
 .topbigdropdown {float：left;文字修饰：无;字体大小：16px的;字体重量：粗体;光标：指针;背景：url（../ images / navbar / topbigdrop.gif）不重复右上;颜色：#ccc;} 
 
 .top：hover {color：#fff;背景：url（../ images / navbar / tophover.gif）no-repeat right top;} 
 
 .topbig：hover {color：#fff;背景：url（../ images / navbar / topbighover.gif）不重复右上;} 
 
 .topbigdropdown：hover {color：#fff;背景：url（../ images / navbar / topbigdrophover.gif）no-repeat right top;} 
 
 .topdropdown：hover {color：#fff;背景：url（../ images / navbar / topdrophover.gif）no-repeat right top;} 
  

解决方案

终于修复了！

这不是代码或css的问题，它显然是我的版本铬。基本上，即使某些图像/文件被缓存，Chrome仍然会尝试一个if-modified-GET请求之后的服务器。因此，为了解决这个问题，我使用.htaccess文件设置了缓存文件类型的到期时间来覆盖这个 - 即ExpiresByType image / jpg访问加上4个小时http://code.google.com/p/chromium/issues/detail?id=102706

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

解决方案

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

这篇关于javascript预加载了任何不在chrome中工作的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！