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

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

Для того, что бы фото загружалось в фоне и не портило вид наших скрытых блоков во время открытия напишем небольшую функцию на 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");
});