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

I have an image loaded by JS on a mouse event. It's a fairly big image so I want to make sure it gets pre-loaded. I reemmber some old techniques from years ago and found this example:

我有一个由鼠标事件加载的图像。这是一个相当大的图像,所以我想确保它预先加载。我重新介绍了几年前的一些旧技术并找到了这个例子:

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

I wondered if this is still good/relevant, or maybe browsers automatically detect unused images and preload them anyway? Note my page has to support IE6, so I might still need older techniques anyway, but I'm still interested if more modern browsers have a better way?

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

3 个解决方案

#1

Nope, this is it. Why change something that works?

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

But a more proper usage is like this

但更恰当的用法是这样的

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

or just

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

Both of these avoids cluttering the global scope with variables.

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

And language="JavaScript" is deprecated. Use type="text/javascript".

并且不推荐使用language =“JavaScript”。使用type =“text / javascript”。

#2

Depends what kind of images you are talking about, icons/buttons etc. could be done using a technique called CSS Sprites.

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

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

#3

That's interesting. I was asking myself the exact same question recently. Another method would be to create a DOM element for each element and wait until you need to display it before injecting it into the document body. For example,

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

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

...and then later, when you know the images are ready to be inserted...

......然后,当你知道图像准备插入时......

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

This does result in the file getting 'pre-loaded' in the modern browsers I tested and it may actually be more consistent with your own coding styles, but I'm still worried that some browsers might not load the image at the time of the element creation but wait until it's added to the document body. So I opted to use the exact solution you mentioned. At least until the next update to ECMAScript, there's nothing wrong with "old code" (at least old code like new Image()). It works and it was intended to work this way. I don't think it's particularly hacky.

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

[Edit] The second block of code should be made to execute when you are sure the images have loaded and/or when the user does whatever it is you expect him or her to do that triggers its appearance.

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

#1