Предварительная загрузка динамически загружаемых изображений с помощью jquery

Я сделал быстрый фрагмент с идеей моего первоначального комментария, который должен работать в разных доменах или нет:

$(function() {
    //creates an imgcacher hidden element
    $('<div/>', {id: 'imgcacher', style: 'display:none;'}).appendTo('body');
    var cacher = $('#imgcacher'); //caches the cacher selector

    //appends the images to the DOM for caching
    $('.galleryImgs').each(function(){
        $('<img/>', {src: $(this).data('src'), class: "precachedImg"}).appendTo(cacher);
    });

    //clean up the DOM after the images are fully loaded and cached
    $('.precachedImg').promise().done(function() {
        cacher.remove();
    });
});​

DEMO
Обратите внимание, что второе изображение может быть слишком большой для загрузки за 5 секунд, если ваше соединение недостаточно быстрое, но тогда оно должно быть хотя бы частично загружено.

$.get не работало для кэширования изображений в Chrome, когда я тестировал его, поэтому решение, приведенное выше, является моим предпочтительным. Он прекрасно работает во всех браузерах, которые я тестировал, при любой скорости соединения и размере файла. Современные браузеры будут запрашивать ресурс изображения только один раз и отображать его параллельно со всеми другими дубликатами на странице, не генерируя дополнительных запросов, как запрос ajax.

Кроме того, это динамичное, масштабируемое и чистое решение. Однако, если вы предпочитаете простоту, у конечного пользователя будет «тот же самый» опыт, что и при первоначальном добавлении изображений с display:none в DOM. Очевидно, что это излишне загромождает DOM, поэтому я бы использовал свой фрагмент выше.

Кроме того, вот немного упрощенная версия:

$(function() {
    //appends the images to the DOM for caching
    $('.galleryImgs').each(function(){
        $('<img/>', {src: $(this).data('src'), class: 'precachedImg', style: 'display:none;'}).appendTo('body');
    });

    //clean up the DOM as the images are loaded and cached
    $('.precachedImg').load(function() {
        $(this).remove();
    });
});

Скрипка