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

Question

Дмитрий @se_demon

JavaScript

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

У меня на странице несколько контейнеров 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 мс, а не все сразу?

Вопрос задан более трёх лет назад
257 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Вопрос был решен следующим образом:
У меня подключена 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 · 2018-05-18 14:22:08

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

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

Войдите на сайт