imagesLoaded – очень полезный плагин для определенных событий на сайте, суть работы плагина в том что он следит за загрузкой нужного изображения или изображений и когда оно загрузилось полностью можно выполнить следующее какое-либо действие.
Установка
Скачав архив вам будет нужно подключить один из предлагаемых файлов либо подключить файл из репозитория как ниже.
1 2 3 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script> <!-- или --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.js"></script> |
Использование
У плагина практически нет никаких настроек кроме одной, о которой поговорим отдельно. Запускаем отслеживание загрузки изображения следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 | $('#container').imagesLoaded( function() { // этот код выполнится после полной загрузки изображений }); // либо вариант с дополнительными настройками $('#container').imagesLoaded( { // настройки }, function() { // этот код выполнится после полной загрузки изображений } ); |
Функция imagesLoaded() всегда возвращает объект jQuery, а к такому объекту можно применять такие функции как: .always(), .done(), .fail() and .progress(), что позволит сделать предыдущий пример максимально функциональным и на каждый результат описать свое действие!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $('#container').imagesLoaded() .always( function( instance ) { console.log('Все изображения загружены'); }) .done( function( instance ) { console.log('Все изображения загрузились удачно'); }) .fail( function() { console.log('все изображения загружены, но одно или больше не загрузились'); }) .progress( function( instance, image ) { var result = image.isLoaded ? 'загрузилось' : 'не загрузилось'; console.log( 'Изображение ' + image.img.src + result ); }); |
Настройки
Теперь небольшой пример с использованием единственной настройки: { background: true } – определяет, загрузилось ли фоновое изображение.
1 2 3 | $('#container').imagesLoaded( { background: true }, function() { console.log('#container фоновое изображение загружено'); }); |
Так же можно в параметре background указывать селектор блока:
1 2 3 | $('#container').imagesLoaded( { background: '.item' }, function() { console.log('Все фоновые изображения элементов .item загружены'); }); |
События
Событие | Пример | ||
---|---|---|---|
always |
| ||
done |
| ||
fail |
| ||
progress |
|