小编典典

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

javascript

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

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

那么,预加载图像的最佳方法是什么?


阅读 259

收藏
2020-05-01

共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来检索图像数据)。

2020-05-01