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

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

    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'
]);

函数预加载（数组图像）{
$（arrayOfImages）.each（函数（）{
$('
我有相当多的小图像需要预加载（合并后都远低于1MB），我想知道是否有一种方法可以做到这一点，而无需单独声明每个图像

任何建议都是非常感谢的！
 不是你的问题的直接答案，但是我的建议是考虑使用CSS精灵，把它们放在一个图像中，用CSS控制显示的东西。
 你可以使用一个装入程序脚本。当加载很多“小块”时，这是非常有用的。图像，因为它要快得多

演示：

加载过程如下所示：

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'
    ]
});

supply.listen（'image/jpg'，函数（有效载荷，文件名）{
jQuery（'
本例将直接将新加载的图像附加到
document.body
。当然，您可以对mime类型侦听器中的图像执行任何操作。
诚然，这也需要明确指定每个图像，但速度应该快得多

…顺便说一句，也许的作者会添加一个*.jpg，例如，因为这实际上是个好主意；）
我对使用精灵进行翻滚导航栏很熟悉，但我必须承认我只读过关于将其用于其他目的的文章。也许我应该提到，这些图像用于几个下拉菜单。我了解精灵的定位方法，但由于它们分布在多个菜单中，因此看起来像CSS w这将非常耗时。@用户，出于性能原因，您是否计划加载之前的图像？如果是，您计划何时准确调用该图像。我想加载附加到主导航的各种菜单的图像，以提高性能（目前看起来有点笨重）。使用click（）调用图像或焦点（）根据用户的不同，如果您计划花费一些钱，有多种方法可以做到这一点，一个建议是使用css sprites，因为浏览器只对所有图像发出请求。您可以查看一些公司，如akamai，它为您缓存css、js和图像，以便将请求发送到最近的服务器。您可以实现cache heade请在图像上显示这些信息，以便浏览器缓存这些信息，而不进行后续请求。如果此信息不正确，请告诉我useful@user，你什么时候调用这个函数？？？@andy，不管怎么说，它从浏览器发出的http请求是相同的，这将如何提高性能，你能解释更多吗…@siri：简单的答案是，这将加载100个imag使用一个http请求执行es，而经典方法（如OP现在使用的方法）将创建100个http请求。大量开销。@andy，它如何在一个请求中完成，任何细节都会有帮助。@siri:嗯，我发布了github链接，在那里都有描述。简短：它在服务器上使用了一个小帮助器脚本，将所有文件连接起来并通过网络传输。@jAndy，听到这个消息很好，这可能是真的这对我们处理大量图像非常有用