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

Question

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

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

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

Answer 1

拼写正如其他人提到的那样，由于多种原因，拼写效果很好，但是，效果却不尽如人意。从好的方面来说，您最终只对图像发出一个HTTP请求。YMMV虽然。不利的一面是，您将所有内容加载到一个HTTP请求中。由于当前大多数浏览器都限于2个并发连接，因此图像请求可以阻止其他请求。因此，YMMV和菜单背景之类的内容可能无法渲染一会。多张图像共享相同的调色板，因此可以节省一些费用，但情况并非总是如此，甚至可以忽略不计。由于图像之间共享的数据更多，因此压缩得到了改善。但是，处理不规则形状非常棘手。将所有新图像合并到新图像中是另一种烦恼。使用<img>标签的低千斤顶方法如果您正在寻找最确定的解决方案，则应采用我仍然偏爱的低千斤顶方法。在文档的末尾创建的<img>链接到的图像和设置width，并height以1x1像素，另外把它们放在一个隐藏的股利。如果它们在页面末尾，则会在其他内容之后加载它们。

Answer 2

这里介绍的方法均不适合我使用，因此，这是经过测试并与Chrome 25和Firefox 18一起使用的方法。使用jQuery和此插件来解决load事件怪癖：function preload(sources, callback) {&nbsp; &nbsp; if(sources.length) {&nbsp; &nbsp; &nbsp; &nbsp; var preloaderDiv = $('<div style="display: none;"></div>').prependTo(document.body);&nbsp; &nbsp; &nbsp; &nbsp; $.each(sources, function(i,source) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("<img/>").attr("src", source).appendTo(preloaderDiv);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(i == (sources.length-1)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(preloaderDiv).imagesLoaded(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(callback) callback();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; if(callback) callback();&nbsp; &nbsp; }}用法：preload(['/img/a.png', '/img/b.png', '/img/c.png'], function() {&nbsp;&nbsp; &nbsp; console.log("done");&nbsp;});请注意，如果禁用了缓存，您将得到不同的结果，当开发人员工具打开时，默认情况下在Chrome上是这样，因此请记住这一点。