Question

我对网页设计还不熟悉，我刚刚创建了以下网站http://www.janewaltonwatercolours.co.uk，除了几个小的陈词滥调之外，它还适用于所有浏览器。

然而，在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;}

Answer 1

终于修好了！

这不是代码或css的问题，它显然是我的Chrome版本的已知问题。基本上，即使某些图像/文件被缓存，Chrome仍然会尝试对服务器进行if-modified-since GET请求。所以要修复，我已经使用.htaccess文件设置缓存文件类型的到期时间来覆盖它 - 即ExpiresByType图像/ jpg“访问加上4小时”http://code.google.com/p/chromium/issues/detail?id=102706

Answer 2

跟进：

我看着你小提琴，我不能肯定地说这个问题，但我注意到你正在使用js来改变css文件，具体取决于窗口大小。

我猜这是个问题。加载css，加载dom然后js运行，当你调用新的css时你会看到闪烁。

您可以在css中使用媒体类型和媒体查询来解决此问题。 cf w3.org/TR/css3-mediaqueries和stackoverflow.com/a/996796/215752

我使用了媒体查询，然后在dom加载之前定义了css，并且应该没有闪烁。

只有一种尺寸可能会出现错误 - 使用媒体类型很容易强制进行测试。

我没有看到你的代码有什么问题，我不认为这段代码会导致闪烁（我希望这是一个CSS问题）但是这里是你用更新的样式重写的代码：

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

我没有看到var images = inArray的原因（可能只是使用inArray），但我保持它与您的代码一致，有很多方法可以用这个功能编写代码。

我建议发布一个新问题，详细说明你使用chrome的闪烁问题 - 我猜测你可以了解真正问题的核心细节。

Answer 3

您需要使用arguments而不是preload.arguments来访问传递给函数的参数。

虽然使用func.arguments只会导致严格模式出现问题，但在Chrome中可能完全禁止使用。

如果fun处于严格模式，则fun.caller和fun.arguments都是不可删除的属性，在设置或检索时抛出

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

javascript预加载任何不在chrome中工作的图像

3 个答案: