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

jQuery: предварительная загрузка изображений-1

Довольно часто случается так, что на странице используются скрытые блоки, содержащие графические элементы, которые по умолчанию не загружаются. И когда элемент необходимо отобразить, если изображение много весит, происходит неприятный эффект прорисовки или торможения. Для того, что бы фото загружалось в фоне и не портило вид наших скрытых блоков во время открытия напишем небольшую функцию на JQuery.

Загружаем картинки в фоне

jQuery.preloadImages = function() {
  var images = (typeof arguments[0] == 'object') ? arguments[0] : arguments;
  for(var i = 0; i < images.length; i++) {
    jQuery("<img alt="">").attr("src", images[i]);
  }
} 

Если функции preloadImages передан только один параметр, то он автоматически будет преобразован в массив. Если же передан уже готовый массив, то по нему выполняется цикл, который создает элементы IMG, определяя их SRC атрибут.

Для примера вызовем предзагрузку одного изображения:

$(function () {
  $.preloadImages("/blog/wp-content/uploads/2015/11/css_color.jpg"); 
}); 

Если необходимо вызвать больше картинок, просто перечисляем их через запятую:

$(function () {
  $.preloadImages("/blog/wp-content/uploads/2015/11/css_color.jpg",
                  "/blog/wp-content/uploads/2015/12/jquery_preload_image.jpg"); 
});
Автор: Unknow, Источник
 

Добавить комментарий


Защитный код
Обновить