javascript预加载任何不适用于chrome的图像

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 image/jpg "access plus 4 hours" 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

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

也可能只有一种尺寸存在错误——对于媒体类型，很容易强制使用一种进行测试。

---

我没有发现您的代码有任何问题，并且我认为这段代码不会导致闪烁（我认为这是 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