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

javascript preloading of any images not working in chrome

本文关键字：不起作用 图像 chrome 加载 任何 javascript      更新时间：2023-09-26

我对网页设计还很陌生，我刚刚创建了以下网站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之外的所有应用程序-有什么想法吗？

收到任何帮助！

Mike

更多细节-导航栏在悬停时闪烁，暗示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仍然会尝试从GET请求到服务器的if修改。因此，为了修复此问题，我已经使用.htaccess文件设置了缓存文件类型的过期时间来覆盖它，即ExpiresByType image.jpg"access plus 4 hours"http://code.google.com/p/chromium/issues/detail?id=102706

后续行动：

我看过你的fiddle，我不能确定这个问题，但我注意到你正在使用js根据窗口大小更改css文件。

我猜这就是问题所在。加载css，加载dom，然后运行js，当调用新css时，您会看到闪烁。

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

我使用了媒体查询，然后在加载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的闪烁问题——我猜通过一些细节，你可以了解真正问题的核心。

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

虽然使用func.arguments只会在严格模式中引起问题，但在Chrome中可能完全不允许使用。

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

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

相关文章：