Запуск jquery скрипта по одному селектору для нескольких DIV. Как правильно поступить?

Question

[Дмитрий]

У меня на странице несколько контейнеров Before after скрипта

<div class="twentytwenty-container">	
	<img  src="before1.jpg"/>
	<img  src="after1.jpg"/>
</div>
<div class="twentytwenty-container">	
	<img  src="before2.jpg"/>
	<img  src="after2.jpg"/>
</div>
<div class="twentytwenty-container">	
	<img  src="before3.jpg"/>
	<img  src="after3.jpg"/>
</div>

И скрипт вызова функции плагина twentytwenty

$(".twentytwenty-container").twentytwenty({
	default_offset_pct: 0.5,
	no_overlay: true, 
	move_slider_on_hover: true, 
	move_with_handle_only: false, 
	click_to_move: false
});

т.к. вызов происходит по одному селектору twentytwenty-container,
то часто получается так, что загрузился 1 и 2 блок, а третий нет. После перезагрузки страницы - все загружатся.
И вот, у меня на странице их 10-15 штук и постоянно то 5, то 8, то 10, то несколько сразу блоков не загружатся
Как правильно написать скрипт так, чтоб он проверял эти блоки в каком-то цикле,
то есть, запускал их по очереди с задержкой, например, 200 мс, а не все сразу?

Comments

[Дмитрий]

Вопрос был решен следующим образом:
У меня подключена jquery 3.1.1 и у нее
$(window).load(function() {});
заменена на $(window).on("load", function (e) {})
Поэтому, оно не работал так. как на сайте плагина написано и я использовал таймер.

В итоге, прописал так:

$(window).on("load", function (e) {
$(".twentytwenty-container").twentytwenty({
default_offset_pct: 0.5,
no_overlay: true,
move_slider_on_hover: true,
move_with_handle_only: false,
click_to_move: false
});
});

и все работает отлично. Всем спасибо. Понимаю, что не полностью раскрыл вопрос.

Answer 1

[Алексей Уколов]

var i = 0;
$(".twentytwenty-container").each(function () {
  setTimeout(function () {
    $(this).twentytwenty({
      default_offset_pct: 0.5,
      no_overlay: true, 
      move_slider_on_hover: true, 
      move_with_handle_only: false, 
      click_to_move: false
    });
  }, i * 200);

  i++;
});

Comments

[Дмитрий]

То есть, здесь будет заускать первый блок, потом через, например, 200 мс по таймеру искать и запускать следующий? Или он по таймеру через 200 мс все 10 блоков запустит одновременно?

[Алексей Уколов]

По одному с интервалом в 200 мс.

[Дмитрий]

не запускается скрипт )
Консоль ошибок не выдает )

Answer 2

[Андрей Гончаров]

Сперва надо найти источник ошибки. Тут ошибка не в том, что у вас много одинаковых классов, на которых надо инициализировать скрипт. Не важно сколько контейнеров - все они должны нормально отработать.
Проблема у вас кроется в том, что скрипт не может отработать правильно пока в блоке не будут загружены изображения.
Проверить загрузку изображений можно плагином типа такого:
imagesloaded
Уже по колбэку этого плагина инициализировать твентитвенти.

Answer 3

[Виктор]

$(".twentytwenty-container").each(function() {
    var $this = $(this);

    clearTimeout(timer);
    var timer = setTimeout(function() {
        $this.twentytwenty({
            default_offset_pct: 0.5,
            no_overlay: true, 
            move_slider_on_hover: true, 
            move_with_handle_only: false, 
            click_to_move: false
        });
    }, 200);
})

Comments

[Алексей Уколов]

Что-то странное у вас в коде происходит 0_о

[Виктор]

где?

[Алексей Уколов]

Переменная timer всегда будет undefined в clearTimout. Зачем вообще clearTimout там? Чем это отличается от того, что у автора сейчас, кроме того, что всё будет запущено на 200 мс позже, но так же разом?