Question

我在JS上加载了一个鼠标事件的图像。这是一个相当大的图像，所以我想确保它预先加载。我重新考虑了几年前的一些旧技术，发现this example：

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images) 
{
   img1 = new Image();
   img2 = new Image();
   img1.src = "imageName1.gif";
   img2.src = "imageName2.gif"
}
</SCRIPT>

我想知道这是否仍然很好/相关，或者浏览器可能会自动检测未使用的图像并预先加载它们？注意我的页面必须支持IE6，所以我可能仍然需要更老的技术，但是如果更现代的浏览器有更好的方法，我仍然感兴趣吗？

Answer 1

不，这就是它。为什么改变有用的东西？

但更恰当的用法就是这样

(function() {
   var img1 = new Image();
   var img2 = new Image();
   img1.src = "imageName1.gif";
   img2.src = "imageName2.gif"
})();

或只是

new Image().src = "imageName1.gif";
new Image().src = "imageName2.gif"

这两个都避免了变量使全局范围混乱。

并且language="JavaScript"已被弃用。使用type="text/javascript"。

Answer 2

取决于您所谈论的图像，图标/按钮等可以使用一种称为CSS Sprites的技术来完成。

http://www.alistapart.com/articles/sprites

Answer 3

这很有趣。我最近问自己完全相同的问题。另一种方法是为每个元素创建一个DOM元素，并等到需要在将其注入文档主体之前显示它。例如，

var img1 = document.createElement('img');
var img2 = document.createElement('img');
img1.setAttribute('src','imageName1.gif');
img2.setAttribute('src','imageName2.gif');

...然后，当您知道图像已准备好插入时......

document.getElementById('imagePlaceholder1').appendChild(img1);
document.getElementById('imagePlaceholder2').appendChild(img2);

这确实导致文件在我测试的现代浏览器中被“预加载”，并且它实际上可能与您自己的编码样式更加一致，但我仍然担心某些浏览器可能无法加载图像。元素创建的时间，但等到它被添加到文档正文。所以我选择使用你提到的确切解决方案。至少在ECMAScript的下次更新之前，“旧代码”（至少旧代码如新的Image（））没有任何问题。它有效并且打算以这种方式工作。我认为这不是特别的hacky。

[编辑]第二段代码应该在您确定已加载图像时和/或当用户做了您希望他或她做的任何事情时执行，以触发其外观。

用HTML预加载图像，有更现代的方式吗？

3 个答案: