使用 JQuery 预加载图像 - 从文件夹加载图像？答案

【问题标题】：Preloading images using JQuery- Load images from folder?使用 JQuery 预加载图像 - 从文件夹加载图像？
【发布时间】：2011-07-07 01:24:54
【问题描述】：

目前我正在使用一个非常基本的功能来预加载图像：

    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
            // Alternatively you could use:
            // (new Image()).src = this;
        });
    }

    // Usage:

    preload([
        'img/imageName.jpg',
        'img/anotherOne.jpg',
        'img/blahblahblah.jpg'
]);

我有相当多的小图像需要预加载（合并后都远低于 1MB），我想知道是否有办法在不单独声明每个图像的情况下这样做。

任何建议将不胜感激！

【问题讨论】：

@user ，你什么时候调用这个函数？？

标签： javascript jquery image preload

【解决方案1】：

您可以使用像supplyJS 这样的加载程序脚本。这在加载大量“小”图像时非常有用，因为它要快得多。

演示：http://www.typeofnan.com/lab/mxhr-stream/

加载看起来像：

supply.listen('image/jpg', function(payload, filename) {
    jQuery('<img>', {
        src: 'data:image/jpeg;base64,' + payload
    }).appendTo(document.body);;
});

supply.setDealer('/cgi-bin/supply.pl').files({
    images: [
        '/images/foo.jpg',
        '/images/bar.jpg',
        '/images/another.jpg'
    ]
});

此示例将直接将新加载的图像附加到document.body。当然，你可以对 mime-type-listener 中的那些做任何事情。诚然，这也需要明确指定每个图像，但它应该快得多。

^{..顺便说一句，supplyJS 的作者可能会添加一个 *.jpg，因为这实际上是个好主意；）}

【讨论】：

@andy ，反正浏览器发出的http请求也是一样的，这将如何提高性能，你能解释一下吗...
@siri：简单的答案是，这将使用 one http 请求加载 100 个图像，而经典方式方法（如 OP 现在使用的）将创建 100 个 http要求。大量开销。
@andy ，它是如何在一个请求中完成的，任何见解都会有所帮助。
@siri：好吧，我发布了 github 链接，所有内容都在那里描述。简而言之：它在服务器上使用了一个小帮助脚本，它连接所有文件并通过网络传输这些文件。
@jAndy，很高兴听到这个消息，这对我们处理大量图像可能真的很有用

【解决方案2】：

不是直接回答您的问题，但我的建议是考虑使用 CSS 精灵，即将它们全部放在一个图像中并使用 CSS 控制显示的内容。

【讨论】：

我很熟悉将精灵用于翻转导航栏，但我必须承认我只阅读过有关将它们用于其他目的的信息。也许我应该提到这些图像用于几个下拉菜单。我了解与精灵相关的定位方法，但由于它们分布在多个菜单中，因此 CSS 似乎真的很耗时。
@user ，您是否打算出于性能原因加载之前？如果是这样，您打算什么时候调用该图像
没错。我想加载附加到主导航的各种菜单的图像以加快性能（目前看起来有点笨拙）。图像使用 click() 或 focus() 调用，具体取决于。
@user ，如果您打算花钱，有多种方法可以做到这一点，一个建议是使用 css sprites，因为浏览器只请求所有图像。您可以查看一些像 akamai 这样为您缓存 css、js 和图像的公司，以便请求发送到他们最近的服务器。您可以在图像上实现缓存标头，以便浏览器缓存它们并且不发出后续请求，让我知道此信息是否有用