Я полностью осознаю, что этот вопрос задан и ответил везде, как на SO, так и выключен. Однако каждый раз, когда кажется, что существует другой ответ, например. this, и .
Мне все равно, использует ли он jQuery или нет - что важно, что он работает, и кросс-браузер.]
Итак, каков наилучший способ предварительной загрузки изображений?
К сожалению, это зависит от вашей цели. Если вы планируете использовать изображения в целях стиля, лучше всего использовать спрайты. http://www.alistapart.com/articles/sprites2
Однако, если вы планируете использовать изображения в <img> теги, то вы захотите предварительно загрузить их с помощью
function preload(sources)
{
var images = [];
for (i = 0, length = sources.length; i < length; ++i) {
images[i] = new Image();
images[i].src = sources[i];
}
}
(измененный источник, взятый из Каков наилучший способ предварительной загрузки нескольких изображений в JavaScript?)
с помощью new Image() не связано с расходами на использование методов DOM, но новый запрос для указанного изображения будет добавлен в очередь. Поскольку изображение, на данный момент, фактически не добавлено на страницу, не связано с повторным рендерингом. Я бы рекомендовал, однако, добавить это в конец вашей страницы (так как все ваши сценарии должны быть, когда это возможно), чтобы не допустить, чтобы он удерживал более критические элементы.
Изменить: Отредактировано, чтобы правильно отразить комментарий, указывая, что для работы требуются отдельные объекты Image. Спасибо, и мой плохой, чтобы не проверить его более внимательно.
Edit2: отредактирован, чтобы сделать повторное использование более очевидным
Редактировать 3 (3 года спустя):
Из-за изменений в том, как браузеры обрабатывают невидимые изображения (отображение: нет или, как в этом ответе, никогда не добавляется к документу), предпочтительным является новый подход к предварительной загрузке.
Вы можете использовать запрос Ajax для принудительного раннего извлечения изображений. Использование jQuery, например:
jQuery.get(source);
Или в контексте нашего предыдущего примера вы можете сделать:
function preload(sources)
{
jQuery.each(sources, function(i,source) { jQuery.get(source); });
}
Обратите внимание, что это не относится к случаю спрайтов, которые являются точными как-есть. Это просто для вещей, таких как фотогалереи или слайдеры/карусели с изображениями, где изображения не загружаются, потому что они не видны изначально.
Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для извлечения данных изображения).
спрайтов
Как уже упоминалось, написание работает довольно хорошо по целому ряду причин, однако оно не так хорошо, как это было сделано.
Работа с нерегулярными фигурами сложна. Сочетание всех новых изображений с новыми - еще одно раздражение.
Подход с низким гнездом с использованием <img> теги
Если вы ищете решение наиболее окончательное, тогда вы должны пойти с подходом с низким уровнем доступа, который я по-прежнему предпочитаю. Создать <img> ссылки на изображения в конце вашего документа и установите width и height на 1x1 пиксель и дополнительно поместите их в скрытый div. Если они находятся в конце страницы, они будут загружены после другого содержимого.
По состоянию на январь 2013 года ни один из описанных здесь методов не работал, поэтому здесь вместо этого было протестировано и работает с Chrome 25 и Firefox 18. Использует jQuery и этот плагин, чтобы обойти причуды события загрузки:
function preload(sources, callback) {
if(sources.length) {
var preloaderDiv = $('<div style="display: none;"></div>').prependTo(document.body);
$.each(sources, function(i,source) {
$("<img/>").attr("src", source).appendTo(preloaderDiv);
if(i == (sources.length-1)) {
$(preloaderDiv).imagesLoaded(function() {
$(this).remove();
if(callback) callback();
});
}
});
} else {
if(callback) callback();
}
}
Использование:
preload(['/img/a.png', '/img/b.png', '/img/c.png'], function() {
console.log("done");
});
Обратите внимание, что вы получите смешанные результаты, если кеш отключен, который по умолчанию включен в Chrome, когда инструменты разработчика открыты, поэтому имейте это в виду.
По моему мнению, использование Multipart XMLHttpRequest, представленное некоторыми библиотеками, будет предпочтительным решением в последующие годы. Однако IE < v8, по-прежнему не поддерживают данные: uri (даже IE8 имеет ограниченную поддержку, позволяя до 32kb). Ниже приведена реализация предварительной загрузки параллельных изображений - http://code.google.com/p/core-framework/wiki/ImagePreloading, которая входит в рамки, но все же стоит взглянуть.
Это было давно, поэтому я не знаю, сколько людей все еще интересуется предварительным загрузкой изображения.
Мое решение было еще более простым.
Я просто использовал CSS.
#hidden_preload {
height: 1px;
left: -20000px;
position: absolute;
top: -20000px;
width: 1px;
}
Здесь идет мое простое решение с постепенным исчезновением изображения после его загрузки.
function preloadImage(_imgUrl, _container){
var image = new Image();
image.src = _imgUrl;
image.onload = function(){
$(_container).fadeTo(500, 1);
};
}
В моем случае использования у меня была карусель с полноэкранными изображениями, которые я хотел предварительно загрузить. Однако, поскольку изображения отображаются в порядке и могут занять несколько секунд для загрузки, важно, чтобы я загружал их по порядку, последовательно.
Для этого я использовал метод async library waterfall() (https://github.com/caolan/async#waterfall)
// Preload all images in the carousel in order.
image_preload_array = [];
$('div.carousel-image').each(function(){
var url = $(this).data('image-url');
image_preload_array.push(function(callback) {
var $img = $('<img/>')
$img.load(function() {
callback(null);
})[0].src = url;
});
});
async.waterfall(image_preload_array);
Это работает, создавая массив функций, каждой функции передается параметр callback(), который он должен выполнить, чтобы вызвать следующую функцию в массиве. Первым параметром callback() является сообщение об ошибке, которое выйдет из последовательности, если предоставляется ненулевое значение, поэтому мы каждый раз пропускаем null.
Смотрите это:
http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery
Связанный вопрос о SO: