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

Предварительная загрузка изображений очень полезна: вместо того, чтобы загружать изображения во время какого-либо действия (например, картинка подгружается лишь при наведении мышки на ссылку) пользователя, мы можем предварительно загрузить изображения в "фон", что подготовит изображения для дальнейшего использованию.
Плюс предварительной загрузки в том, что пользователь не увидит задержку при показе изображений, например, (время потраченное на загрузку изображений) при наведении мышки на разные ссылки. Сделать это на jQuery довольно просто. Как? Смотрите ниже небольшой фрагмент кода:

jQuery

(function($) {
  var cache = [];
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

Вызов функции:

jQuery

jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

Давайте разобьем наш скрипт на небольшие фрагменты:

Чтобы исключить появление ошибок при взаимодействии с другими библиотеками (например, если $ уже занят другой библиотекой) необходимо заключить нашу вспомогательную функцию в следующую конструкцию (анонимную функцию):

jQuery

(function($) {

...

})(jQuery)

Внутри анонимной функции мы имеем переменную, в которой будем складировать загружаемые изображения. Причина присоединения к jQuery - избежать загрязненности глобальной области видимости. Если Вы не используете jQuery на странице или используете какой-либо глобальный объект, вероятно, лучше присоединить метод к такому объекту.

jQuery

var cache = [];

jQuery

$.preLoadImages = function() { .............  }

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

jQuery

var args_len = arguments.length;

Проходим в цикле по каждому аргументу. Нам не важен порядок, в котором изображения предварительно загружаются на страницу, поэтому подгружаем их начиная с последнего. Цикл с конца быстрее, чем цикл с начала.

jQuery

for (var i = args_len; i--;) {
  ...
}

Создаем изображение как DOM-элемент в браузере. Как только изображение создано, устанавливаем путь и присоединяем к массиву cache.

jQuery

var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);