javascript - 使用 JavaScript/jQuery 预加载图像的最佳方式是什么？

Question

我完全知道这个问题在任何地方都被问过和回答过，无论是在 SO 上还是在 SO 下。但是，每次似乎都有不同的答案，例如this , this和 that .

我不关心它是否使用 jQuery - 重要的是它可以工作，并且是跨浏览器的。]

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

Answer 1

不幸的是，这取决于您的目的。如果您打算将图像用于样式目的，最好的办法是使用 sprite。 http://www.alistapart.com/articles/sprites2

但是，如果您打算在 标签中使用图片，那么您需要使用

预加载它们

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

(修改来源取自 What is the best way to preload multiple images in JavaScript? )

使用 new Image() 不涉及使用 DOM 方法的开销，但对指定图像的新请求将被添加到队列中。由于图像此时并未实际添加到页面中，因此不涉及重新渲染。但是，我建议将其添加到页面末尾(如有可能，您的所有脚本都应该如此)以防止它占用更多关键元素。

编辑:编辑以相当正确地反射(reflect)注释，指出单独的 Image 对象需要正常工作。谢谢，我很抱歉没有更仔细地检查它。

Edit2:经过编辑使可重用性更加明显

编辑 3(3 年后):

由于浏览器处理不可见图像的方式发生了变化(display:none 或者，如本回答中所示，从未附加到文档中)，首选一种新的预加载方法。

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

jQuery.get(source);

或者在我们之前的例子中，你可以这样做:

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

请注意，这不适用于原样很好的 Sprite 。这仅适用于图片库或带有图片的 slider /轮播等内容，其中图片因最初不可见而未加载。

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