Question

我正在开发一个网络应用程序，并且，作为一个完美主义者，我试图使它全部闪亮并符合所有标准。据我所知，<img>标签将在即将推出的xHTML标准中弃用，而且如今即使IE能够正确处理<object>，我也想使用<object>标记我网站上的所有图片。

现在，我需要为标准onmouseover交换预加载一些图片。 <img>：

没问题

var rateImagesURLs = new Array("images/mark0.png", "images/mark1.png");
var rateImages = new Array(rateImagesURLs.length);

for (var i=0;i<rateImagesURLs.length;++i) {
    rateImages[i] = new Image();
    rateImages[i].src = rateImagesURLs[i];
}

但我无法与<object>合作。我找不到将JavaScript的Image对象与实际<object>标记相关联的方法。我尝试使用<object>的{{1}}以及data属性，但即使是W3C的人也似乎不确定如何使用它，建议在他们的文档中分隔值在一个地方有空格，然后在下面用几段逗号......所以我的问题是：如何使用archive标记在JavaScript中预加载图像？

P.S。很抱歉很简单的问题很长的介绍。

Answer 1

坦率地说，这很愚蠢。 <img> isn't going anywhere，它肯定不会从恩典中堕落。＆＃34;事实上，您引用的规范（XHTML2）has been abandoned。

XHTML2工作组的章程在完成本文档的工作之前就已过期。

你应该以标准为目标的是HTML5。即使我建议反对它，如果你绝对坚持XHTML，XHTML5是HTML5的一个子集;但是，唯一的区别是您用于为页面提供服务的MIME类型。由于所需的MIME类型（application/xhtml+xml或application/xml）与旧版浏览器的兼容性较低，因此没有理由在标准网站/网络应用中使用它。

关于整个<img> / <object>事情：

从实际角度来看，请使用<img>。您只是尝试使用<object>，在现有浏览器中引入了一系列兼容性问题。

<object>无法访问。 <img>具有可访问性的alt属性，屏幕阅读器知道如何处理它。屏幕阅读器可能不知道如何处理<object>。另外，<object>不是语义，它是完全通用的。 <img>表示它是一张图片。

同样，<img>不会很快消失或失宠。在可预见的将来，它仍然是在HTML文档中嵌入图像的推荐方法。

最后，评论您如何完成图像翻转：您不应该在JavaScript中执行此操作;使用CSS。

理想情况下，您使用精灵（需要为所有图片提供一次HTTP请求，从而大大提高效果），并调整background-position中的:hover。

Answer 2

我使用<object>玩了一段时间，但是似乎没有任何干净的方法来预加载一次图像然后动态地将它附加到不同的<object>标签。这是一个最适合我的解决方案的示例代码，截至目前，如果有人遇到同样的问题：

// Init
for (var i=0;i<imageCount;++i) {
    imagesUnset[i] = document.createElement("object");
    imagesUnset[i].setAttribute("type", "image/png");
    imagesUnset[i].setAttribute("data", imagesURLs[0]);
    imagesUnset[i].setAttribute("onmouseover", "switchImg(this);");

    imagesSet[i] = document.createElement("object");
    imagesSet[i].setAttribute("type", "image/png");
    imagesSet[i].setAttribute("data", imagesURLs[1]);
    imagesSet[i].setAttribute("onmouseover", "switchImg(this);");
}

function switchImg(caller) {
    // some code to identify caller's index in the array and the image to swap to
    caller.parentNode.replaceChild(newObject, caller);
}

我们必须为每个要交换的图像创建单独的对象;如果我们试图使用相同的对象，JS会给我们一个无效的指针异常。不知道这在内存使用或性能方面是如何工作的，但它确实有效。

有趣的是，新的IE（第9版）在缓存/缓冲方面管理得比Firefox好得多。即使没有特殊的JS来管理缓冲，它也能够在不闪烁的情况下进行更改。也许我最后会不再讨厌它。

如果有人找到更好的解决方案，请分享。感谢。

JavaScript：如何预加载<object>图像数据？ / JavaScript的Image vs. <object> </object> </object>

2 个答案: