我是网站设计的新手,我刚创建了以下网站http://www.janewaltonwatercolours.co.uk,除了几个小的gliches它在所有浏览器上工作.
然而,在Chrome中,我的用于预加载图像的javascript函数不起作用(导致导航栏图像闪烁等)并且已经尝试了所有内容并且没有在网络上遇到任何答案我正在慢慢疯狂….. .
下面是相关代码: –
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];
}
}
除了Chrome之外,这适用于所有人 – 任何想法?
任何帮助都很受欢迎!
麦克风
更多细节 – 导航条在悬停时闪烁表示Chrome不会预加载图像.这是由未在缩略图库页面上预加载的大预览图像支持的.
首次加载页面时会加载main.css样式表,然后根据屏幕大小加载第二个样式表以适合屏幕大小.第二个样式表不会影响导航栏.
main.css中导航栏的代码: – (我知道有点凌乱……)
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;}
解决方法:
终于修好了!
这不是代码或css的问题,它显然是我的Chrome版本的已知问题.基本上,即使某些图像/文件被缓存,Chrome仍然会尝试对服务器进行if-modified-since GET请求.所以要修复,我已经使用.htaccess文件设置缓存文件类型的到期时间来覆盖它 – 即ExpiresByType图像/ jpg“访问加4小时”http://code.google.com/p/chromium/issues/detail?id=102706