使用JavaScript / jQuery预加载图像的权威最佳方法？ [英] The definitive best way to preload images using JavaScript/jQuery?

问题描述

我完全清楚这个问题已经在所有地方被询问和回答，无论是在SO还是关闭。但是，每次似乎有不同的答案，例如此， 此和那个。

I'm fully aware that this question has been asked and answered everywhere, both on SO and off. However, every time there seems to be a different answer, e.g. this, this and that.

我不在乎它是否正在使用jQuery - 重要的是它是有效的，并且是跨浏览器。]

I don't care whether it's using jQuery or not - what's important is that it works, and is cross-browser.]

那么，预加载图像的最佳方法是什么？

So, what is the best way to preload images?

推荐答案

不幸的是，这取决于你的目的。
如果您计划将图像用于风格，最好的办法是使用精灵。
http://www.alistapart.com/articles/sprites2

Unfortunately, that depends on your purpose. If you plan to use the images for purposes of style, your best bet is to use sprites. http://www.alistapart.com/articles/sprites2

但是，如果您打算使用< img>中的图像标签，然后你会想要预加载它们

However, if you plan to use the images in <img> tags, then you'll want to pre-load them with

function preload(sources)
{
  var images = [];
  for (i = 0, length = sources.length; i < length; ++i) {
    images[i] = new Image();
    images[i].src = sources[i];
  }
}

（修改后的来源取自在JavaScript中预加载多个图像的最佳方法是什么？）

使用 new Image（）不涉及使用DOM方法的费用，而是新的请求指定的图像将添加到队列中。由于图像在此时未实际添加到页面中，因此不会涉及重新呈现。但是，我建议将其添加到页面的末尾（因为所有脚本应尽可能），以防止它占用更多关键元素。

using new Image() does not involve the expense of using DOM methods but a new request for the image specified will be added to the queue. As the image is, at this point, not actually added to the page, there is no re-rendering involved. I would recommend, however, adding this to the end of your page (as all of your scripts should be, when possible) to prevent it from holding up more critical elements.

编辑：编辑以反映评论非常正确地指出单独的图像对象需要正常工作。谢谢，我不能更仔细地检查它。

Edited to reflect comment quite correctly pointing out that separate Image objects are required to work properly. Thanks, and my bad for not checking it more closely.

编辑2：编辑以使可重用性更加明显

edited to make the reusability more obvious

编辑3（3年后）：

由于浏览器处理不可见图像的方式发生变化（显示：无或，如这个答案，从未附加到文件中）首选新的预加载方法。

Due to changes in how browsers handle non-visible images (display:none or, as in this answer, never appended to the document) a new approach to pre-loading is preferred.

您可以使用Ajax请求强制提前检索图像。使用jQuery，例如：

You can use an Ajax request to force early retrieval of images. Using jQuery, for example:

jQuery.get(source);

或者在上一个示例的上下文中，您可以这样做：

Or in the context of our previous example, you could do:

function preload(sources)
{
  jQuery.each(sources, function(i,source) { jQuery.get(source); });
}

请注意，这不适用于精细的sprite -is。这仅适用于照片画廊或滑块/旋转木马等带图像的图像未加载的图像，因为它们最初不可见。

Note that this doesn't apply to the case of sprites which are fine as-is. This is just for things like photo galleries or sliders/carousels with images where the images aren't loading because they are not visible initially.

另请注意，此方法不适用于IE（ajax通常不用于检索图像数据）。

Also note that this method does not work for IE (ajax is normally not used to retrieve image data).

这篇关于使用JavaScript / jQuery预加载图像的权威最佳方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！