使用JavaScript / jQuery预加载图像的最佳方法？

Question

我完全意识到，无论是在SO还是离线状态下，这个问题在任何地方都被提出并得到了回答。但是，每次似乎都有不同的答案，例如this，this和that。

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

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

Answer 1

不幸的是，这取决于您的目的。如果您打算将图像用于样式目的，则最好的选择是使用精灵。

但是，如果您打算使用<img>标记中的图像，则需要使用

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

使用newImage()不涉及使用DOM方法的开销，但是对指定图像的新请求将添加到队列中。由于图像目前尚未真正添加到页面，因此不涉及重新渲染。但是，我建议将其添加到页面的末尾（所有脚本应尽可能添加），以防止其占用更多关键元素。

编辑：编辑以正确反映评论，指出Image需要单独的对象才能正常工作。谢谢，我很遗憾没有更仔细地检查它。

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

编辑3（3年后）：

由于浏览器处理不可见图像的方式发生了变化（display：none或在此答案中从未附加到文档中），因此首选新的预加载方法。

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

jQuery.get(source);

或者在前面的示例中，您可以执行以下操作：

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

请注意，这不适用于按原样运行的精灵。这仅适用于带有图片的照片画廊或滑块/转盘，这些图片由于最初不可见而无法加载。

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