Предварительная загрузка изображений с помощью JQuery - загрузить изображения из папки?

Question

В настоящее время я использую довольно простую функцию для предварительной загрузки изображений:

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

У меня достаточно большое количество маленьких изображений, которые мне нужно предварительно загрузить (все вместе, если их объединяет менее 1 МБ), и мне было интересно, есть ли способ сделать это без объявления каждого изображения по отдельности.

Любой совет будет принята с благодарностью!

Answer 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-типа. Следует признать, что для этого также необходимо явно указать каждое изображение, но оно должно быть намного быстрее.

^{.. и, кстати, возможно, автор supplyJS добавит, например, *. Jpg , потому что это на самом деле отличная идея;)}

Answer 2

Не совсем прямой ответ на ваш вопрос, но у меня есть предложение рассмотреть вопрос об использовании CSS-спрайтов, то есть поместить их все в одно изображение и контролировать то, что отображается с помощью CSS.