使用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) {

    if(sources.length) {

        var preloaderDiv = $('<div style="display: none;"></div>').prependTo(document.body);

        $.each(sources, function(i,source) {

            $("<img/>").attr("src", source).appendTo(preloaderDiv);

            if(i == (sources.length-1)) {

                $(preloaderDiv).imagesLoaded(function() {

                    $(this).remove();

                    if(callback) callback();

                });

            }

        });

    } else {

        if(callback) callback();

    }

}

用法：

preload(['/img/a.png', '/img/b.png', '/img/c.png'], function() { 

    console.log("done"); 

});

请注意，如果禁用了缓存，您将得到不同的结果，当开发人员工具打开时，默认情况下在Chrome上是这样，因此请记住这一点。