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

发布于 2024-10-20 00:55:07 字数 501 浏览 1 评论 0原文

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

    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），并且想知道是否有一种方法可以做到这一点，而无需单独声明每个图像。

任何建议将不胜感激！

原文

Currently I am using a pretty basic function to pre-load images:

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

I have a fairly large number of small images I need to pre-load (all far under 1MB when combined), and was wondering if there was a way to do so without declaring each image individually.

Any advice would be greatly appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

此刻的回忆 2024-10-27 00:55:07

您可以使用像 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，因为这实际上是个好主意;)}

You could use a loader-script like supplyJS. This is pretty useful, when loading lots of "smallish" images, because it's much faster.

Demo: http://www.typeofnan.com/lab/mxhr-stream/

The loading would look like:

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

This example would directly append the newly loaded images to the document.body. Of course you could do anything with those in the mime-type-listener.
Admittedly, this also requires to specify each image explicitly but it should be a whole lot faster.

^{..and by the way, perhaps the author of supplyJS will add a *.jpg for instance, because that's actually a great idea ;)}

回复收藏 0 原文