Возможно вас это заинтересует

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

1
2
3
$('#container').imagesLoaded().always( function( instance ) {
  console.log('ALWAYS - Все изображения были загружены');
});

событие говорит о том что загрузка изображений полностью закончилась и не важно удачно или нет. instance – объект jQuery
done

1
2
3
$('#container').imagesLoaded().done( function( instance ) {
  console.log('DONE- Все изображения были УДАЧНО загружены');
});

событие говорит о том что загрузка изображений полностью закончилась УДАЧНО. instance – объект jQuery
fail

1
2
3
$('#container').imagesLoaded().fail( function( instance ) {
  console.log('FAIL- Все изображения были НЕ УДАЧНО загружены');
});

событие говорит о том что загрузка изображений полностью закончилась НЕ УДАЧНО. instance – объект jQuery
progress

1
2
3
4
$('#container').imagesLoaded().progress( function( instance, image ) {
  var result = image.isLoaded ? 'загружено' : 'не загружено';
  console.log( 'Изображение ' + image.img.src + result );
});

событие срабатывает после загрузки каждого изображения. instance – объект jQuery, image – объект конкретного изображения

ДЕМОСКАЧАТЬ
Возможно вас это заинтересует
comments powered by HyperComments