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

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]);
    }
}

Логика функции:
1) если передан один параметр, то он преобразуется в массив, если же передан массив, то он остается и по нему выполняется цикл;
2) цикл создает элементы IMG, определяя их src атрибут.

Примеры использования:

Единичная предзагрузка изображения:

$(function () {
    $.preloadImages("image.jpg");
});

Множественная предзагрузка изображений:

$(function () {
    $.preloadImages("image-1.jpg", "image-2.jpg", "image-3.jpg");
});

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

Поделитесь с друзьями:



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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>