se_demon
@se_demon

Запуск 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 мс, а не все сразу?
  • Вопрос задан
  • 235 просмотров
Пригласить эксперта
Ответы на вопрос 3
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
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++;
});
Ответ написан
agmegadeth
@agmegadeth
Веб-разработчик в дизайн студии
Сперва надо найти источник ошибки. Тут ошибка не в том, что у вас много одинаковых классов, на которых надо инициализировать скрипт. Не важно сколько контейнеров - все они должны нормально отработать.
Проблема у вас кроется в том, что скрипт не может отработать правильно пока в блоке не будут загружены изображения.
Проверить загрузку изображений можно плагином типа такого:
imagesloaded
Уже по колбэку этого плагина инициализировать твентитвенти.
Ответ написан
Комментировать
@futior
$(".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);
})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы