使用 JavaScript/jQuery 预加载图像的最佳方式是什么？

Question

我完全意识到这个问题已经在任何地方被提出和回答，无论是在场还是场外。 然而，每次似乎都有不同的答案，例如 这个，这个和那个。

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

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

Answer 1

不幸的是，这取决于您的目的。
如果您打算将图像用于风格目的，那么最好的选择是使用精灵。
http://www.alistapart.com/articles/sprites2

但是，如果您打算使用 中的图像 标签，那么您需要预先加载它们

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

（修改后的源代码取自 在 JavaScript 中预加载多个图像的最佳方法是什么？）

使用 new Image() 不涉及使用 DOM 方法的费用，但对指定图像的新请求将添加到队列中。 由于此时图像并未实际添加到页面，因此不涉及重新渲染。 不过，我建议将其添加到页面末尾（如果可能的话，所有脚本都应该如此），以防止它占用更多关键元素。

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

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

编辑3（3年后）：

由于浏览器处理不可见图像的方式发生变化（显示：无，或者如本答案所示，从未附加到document）首选新的预加载方法。

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

jQuery.get(source);

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

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

请注意，这不适用于按原样良好的精灵的情况。 这仅适用于照片库或带有图像的滑块/轮播等，其中图像未加载，因为它们最初不可见。

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

Answer 2

Spriting

正如其他人所提到的，由于多种原因，Spriting 效果很好，但是，它并不像看起来那么好。

• 好的一面是，您最终只需对图像发出一次 HTTP 请求。 不过，YMMV。
• 缺点是您需要在一个 HTTP 请求中加载所有内容。 由于当前大多数浏览器仅限于 2 个并发连接，因此图像请求可能会阻止其他请求。 因此，YMMV 和菜单背景之类的东西可能会暂时无法渲染。
• 多个图像共享相同的调色板，因此可以节省一些资源，但情况并非总是如此，即使如此，它也可以忽略不计。
• 由于图像之间有更多的共享数据，因此压缩率得到了改善。

但处理不规则形状是很棘手的。 将所有新图像合并到新图像中是另一个烦恼。

使用 的低插孔方法 标签

如果您正在寻找最明确的解决方案，那么您应该采用我仍然喜欢的低杰克方法。 创建 链接到文档末尾的图像，并将宽度和高度设置为1x1像素，然后将它们放入隐藏的div中。 如果它们位于页面末尾，则会在其他内容之后加载。

Answer 3

截至 2013 年 1 月，此处描述的方法均不适用于我，因此这里是在 Chrome 25 和 Firefox 18 上进行测试和使用的方法。使用 jQuery 和 此插件来解决加载事件怪癖：

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 上默认情况下是禁用缓存的，所以记住这一点。

Answer 4

在我看来，使用一些库引入的 Multipart XMLHttpRequest 将是未来几年的首选解决方案。 然而 IE < v8，仍然不支持data:uri（即使IE8也有有限的支持，最多允许32kb）。 以下是并行图像预加载的实现 - http://code.google.com/ p/core-framework/wiki/ImagePreloading ，它捆绑在框架中，但仍然值得一看。

Answer 5

这是很久以前的事了，所以我不知道有多少人仍然对预加载图像感兴趣。

我的解决方案更加简单。

我刚刚使用了CSS。

#hidden_preload {
    height: 1px;
    left: -20000px;
    position: absolute;
    top: -20000px;
    width: 1px;
}

Answer 6

这是我的简单解决方案，在加载图像后淡入图像。

    function preloadImage(_imgUrl, _container){
        var image = new Image();
            image.src = _imgUrl;
            image.onload = function(){
                $(_container).fadeTo(500, 1);
            };
        }

Answer 7

对于我的用例，我有一个带有我想要预加载的全屏图像的轮播。 然而，由于图像按顺序显示，并且每个图像可能需要几秒钟的时间来加载，因此按顺序加载它们很重要。

为此，我使用了异步库的 waterfall() 方法 (https://github.com/async#waterfall")。 com/caolan/async#waterfall）

        // Preload all images in the carousel in order.
        image_preload_array = [];
        $('div.carousel-image').each(function(){
            var url = $(this).data('image-url');
            image_preload_array.push(function(callback) {
                var $img = $('<img/>')
                $img.load(function() {
                    callback(null);
                })[0].src = url;
            });
        });
        async.waterfall(image_preload_array);

这通过创建一个函数数组来工作，每个函数都会传递参数callback()，它需要执行该参数才能调用下一个函数数组。 callback() 的第一个参数是错误消息，如果提供非 null 值，则会退出序列，因此我们每次都传递 null。

Answer 8

请参阅：

http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery

SO相关问题：

jquery隐藏预加载