Категорический лучший способ предварительно загрузить изображения с помощью JavaScript/jQuery?
Проблема решена.
До обновления у меня было 3 андроид проекта: App1, App2 и Lib. Lib - это проект библиотеки Android, которым пользуются App1 и App2.
После обновления как ADT, так и SDK я увидел ошибки, подобные
[2012-12-05 15:54:10 - Dex Loader] Unable to execute dex: Multiple dex files define Lxxx;
[2012-12-05 15:54:10 - TrailGuide] Conversion to Dalvik format failed: Unable to execute dex: Multiple dex files define Lxxx;
. Решением было удалить в App1 и App2 папку с именем «Lib_src».
3 ответа
К сожалению, это зависит от вашей цели. Если вы планируете использовать изображения в стилистических целях, лучше всего использовать спрайты. http://www.alistapart.com/articles/sprites2
Однако, если вы планируете использовать изображения в тегах , вы захотите предварительно загрузить их с помощью
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, а требует нового запроса для указанное изображение будет добавлено в очередь. Поскольку изображение на данный момент фактически не добавлено на страницу, повторного рендеринга не требуется. Однако я бы рекомендовал добавить это в конец вашей страницы (как и должны быть все ваши скрипты, когда это возможно), чтобы предотвратить задержку более важных элементов.
Редактировать: Отредактировано, чтобы правильно отразить комментарий, указывающий, что для правильной работы требуются отдельные объекты Изображение . Спасибо, и мне плохо, что я не проверил его более внимательно.
Edit2: отредактировано, чтобы сделать повторное использование более очевидным
Edit 3 (3 года спустя):
Из-за изменений в том, как браузеры обрабатывают невидимые изображения (отображение: нет или, как в этом ответе, никогда не добавлялся в документ) предпочтительнее новый подход к предварительной загрузке.
Вы можете использовать запрос Ajax для принудительного раннего получения изображений. Используя jQuery, например:
jQuery.get(source);
Или в контексте нашего предыдущего примера, вы могли бы сделать:
function preload(sources)
{
jQuery.each(sources, function(i,source) { jQuery.get(source); });
}
Обратите внимание, что это не относится к случаю спрайтов, которые хороши как есть. Это только для таких вещей, как фотогалереи или слайдеры / карусели с изображениями, где изображения не загружаются, потому что они изначально не видны.
Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для получения данных изображения).
Edit2: отредактировано, чтобы сделать повторное использование более очевидным
Edit 3 (3 года спустя):
Из-за изменений в том, как браузеры обрабатывают невидимые изображения (отображение: нет или, как в этом ответе, никогда не добавлялось) к документу) предпочтительнее новый подход к предварительной загрузке.
Вы можете использовать запрос Ajax для принудительного раннего получения изображений. Используя jQuery, например:
jQuery.get(source);
Или в контексте нашего предыдущего примера, вы могли бы сделать:
function preload(sources)
{
jQuery.each(sources, function(i,source) { jQuery.get(source); });
}
Обратите внимание, что это не относится к случаю спрайтов, которые хороши как есть. Это только для таких вещей, как фотогалереи или слайдеры / карусели с изображениями, где изображения не загружаются, потому что они изначально не видны.
Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для получения данных изображения).
Edit2: отредактировано, чтобы сделать повторное использование более очевидным
Edit 3 (3 года спустя):
Из-за изменений в том, как браузеры обрабатывают невидимые изображения (отображение: нет или, как в этом ответе, никогда не добавлялось) к документу) предпочтительнее новый подход к предварительной загрузке.
Вы можете использовать запрос Ajax для принудительного раннего получения изображений. Используя jQuery, например:
jQuery.get(source);
Или в контексте нашего предыдущего примера, вы могли бы сделать:
function preload(sources)
{
jQuery.each(sources, function(i,source) { jQuery.get(source); });
}
Обратите внимание, что это не относится к случаю спрайтов, которые хороши как есть. Это только для таких вещей, как фотогалереи или слайдеры / карусели с изображениями, где изображения не загружаются, потому что они изначально не видны.
Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для получения данных изображения).
Из-за изменений в том, как браузеры обрабатывают невидимые изображения (отображение: нет или, как в этом ответе, никогда не добавлялось к документу), предпочтительным является новый подход к предварительной загрузке.
Вы можете использовать запрос Ajax для принудительного раннего получения изображений. Используя jQuery, например:
jQuery.get(source);
Или в контексте нашего предыдущего примера, вы могли бы сделать:
function preload(sources)
{
jQuery.each(sources, function(i,source) { jQuery.get(source); });
}
Обратите внимание, что это не относится к случаю спрайтов, которые хороши как есть. Это только для таких вещей, как фотогалереи или слайдеры / карусели с изображениями, где изображения не загружаются, потому что они изначально не видны.
Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для получения данных изображения).
Из-за изменений в том, как браузеры обрабатывают невидимые изображения (отображение: нет или, как в этом ответе, никогда не добавлялось к документу), предпочтительным является новый подход к предварительной загрузке.
Вы можете использовать запрос Ajax для принудительного раннего получения изображений. Используя jQuery, например:
jQuery.get(source);
Или в контексте нашего предыдущего примера, вы могли бы сделать:
function preload(sources)
{
jQuery.each(sources, function(i,source) { jQuery.get(source); });
}
Обратите внимание, что это не относится к случаю спрайтов, которые хороши как есть. Это только для таких вещей, как фотогалереи или слайдеры / карусели с изображениями, где изображения не загружаются, потому что они изначально не видны.
Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для получения данных изображения).
Вы можете использовать запрос Ajax для принудительного раннего получения изображений. Используя jQuery, например:
jQuery.get(source);
Или в контексте нашего предыдущего примера, вы могли бы сделать:
function preload(sources)
{
jQuery.each(sources, function(i,source) { jQuery.get(source); });
}
Обратите внимание, что это не относится к случаю спрайтов, которые хороши как есть. Это только для таких вещей, как фотогалереи или слайдеры / карусели с изображениями, где изображения не загружаются, потому что они изначально не видны.
Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для получения данных изображения).
Вы можете использовать запрос Ajax для принудительного раннего получения изображений. Используя jQuery, например:
jQuery.get(source);
Или в контексте нашего предыдущего примера, вы могли бы сделать:
function preload(sources)
{
jQuery.each(sources, function(i,source) { jQuery.get(source); });
}
Обратите внимание, что это не относится к случаю спрайтов, которые хороши как есть. Это только для таких вещей, как фотогалереи или слайдеры / карусели с изображениями, где изображения не загружаются, потому что они изначально не видны.
Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для получения данных изображения).
t загружаются, потому что изначально они не видны.Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для получения данных изображения).
t загружаются, потому что изначально они не видны.Также обратите внимание, что этот метод не работает для IE (ajax обычно не используется для получения данных изображения).
Спрайт
Как уже упоминали другие, спрайтинг работает довольно хорошо по разным причинам, однако он не так хорош, как кажется.
- С другой стороны, вы в конечном итоге сделать только один HTTP-запрос для ваших изображений. Однако YMMV.
- С другой стороны, вы загружаете все в одном HTTP-запросе. Поскольку большинство современных браузеров ограничены двумя одновременными подключениями, запрос изображения может блокировать другие запросы. Следовательно, YMMV и что-то вроде фона вашего меню могут немного не отображаться.
- Несколько изображений используют одну и ту же цветовую палитру, поэтому есть некоторая экономия, но это не всегда так и даже в этом случае незначительно.
- Сжатие улучшено, потому что между изображениями больше общих данных.
Однако работать с неправильными формами сложно. Еще одна неприятность - объединение всех новых изображений в новое.
Подход низкого уровня с использованием тегов
Если вы ищете наиболее окончательное решение, то вам следует выбрать подход низкого уровня, который я все еще предпочитаю. Создайте ссылки на изображения в конце документа и установите ширину
и высоту на 1x1 пиксель и дополнительно поместите их в скрытый div. Если они находятся в конце страницы, они будут загружены после другого содержимого.