我完全意识到,无论是在SO还是离线状态下,这个问题在任何地方都被提出并得到了回答。但是,每次似乎都有不同的答案,例如this,this和that。
我不在乎是否在使用jQuery-重要的是它可以工作,并且是跨浏览器的。]
那么,预加载图像的最佳方法是什么?
不幸的是,这取决于您的目的。如果您打算将图像用于样式目的,则最好的选择是使用精灵。
但是,如果您打算使用<img>标记中的图像,则需要使用
<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方法的开销,但是对指定图像的新请求将添加到队列中。由于图像目前尚未真正添加到页面,因此不涉及重新渲染。但是,我建议将其添加到页面的末尾(所有脚本应尽可能添加),以防止其占用更多关键元素。
newImage()
编辑:编辑以正确反映评论,指出Image需要单独的对象才能正常工作。谢谢,我很遗憾没有更仔细地检查它。
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来检索图像数据)。