Статьи

Предварительная загрузка внешних изображений jQuery

Вот как вы можете выполнить предварительную загрузку изображений в кэш браузера (кэширование внешних изображений), которые позже будут вставлены на страницу. Этот метод будет полезен, только если у вас много изображений и вы не контролируете порядок загрузки контейнеров изображений. Например, если вы берете изображения для новых твитов, а затем показывает новые твиты с фотографиями профиля пользователя. Перед загрузкой изображения с внешнего сервера (в нашем примере это Twitter) будет ужасно отсутствующий значок изображения.

Разбитые изображения …

images-not-cached

Через несколько секунд изображения появляются …

images-cahced

Итак, давайте предварительно загрузить внешние изображения …

Поэтому, когда твиты загружены (каким бы способом вы ни пользовались), вы можете добавить этот фрагмент для кэширования изображения профиля пользователя.

//cache the user img
$('img').hide().appendTo('body').one('load', function() {
   console.log('Image: '+$(this).attr('src')+' is cached...');
   $(this).remove();
});

Вывод в консоль Firebug
cahced-images-console-log

Выход в сетевую панель Firebug
images-cache-netpanel

Вот и все ваши изображения должны быть предварительно загружены, а не повреждены! 🙂