Привет, ребята, я пытаюсь лениво загрузить свое слайд-шоу flexslider на свой веб-сайт, но я столкнулся с проблемой, когда все изображения загружаются и появляются на сайте на несколько секунд, а затем загружается слайдер. Я думаю, это происходит потому, что слайдер загружается только после загрузки всех изображений. Мой сайт - это сайт wordpress, и я загрузил flexslider в несколько блоков.

Вот как это выглядит до загрузки: введите описание изображения здесь

Я пробовал использовать скрипт, который якобы загружает слайдер сначала перед изображениями, но это, похоже, не работает:

$(window).load(function() {
  $('.flexslider').flexslider({
    touch: true,
    slideshow: false,
    controlNav: true,
    slideshowSpeed: 7000,
    animationSpeed: 600,
    initDelay: 0,
    start: function(slider) { // Fires when the slider loads the first slide
      var slide_count = slider.count - 1;

      $(slider)
        .find('img.lazy:eq(0)')
        .each(function() {
          var src = $(this).attr('data-src');
          $(this).attr('src', src).removeAttr('data-src');
        });
    },
    before: function(slider) { // Fires asynchronously with each slider animation
      var slides     = slider.slides,
          index      = slider.animatingTo,
          $slide     = $(slides[index]),
          $img       = $slide.find('img[data-src]'),
          current    = index,
          nxt_slide  = current + 1,
          prev_slide = current - 1;

      $slide
        .parent()
        .find('img.lazy:eq(' + current + '), img.lazy:eq(' + prev_slide + '), img.lazy:eq(' + nxt_slide + ')')
        .each(function() {
          var src = $(this).attr('data-src');
          $(this).attr('src', src).removeAttr('data-src');
        });
    }
  });
});

Любая помощь будет оценена по достоинству.

0
Zayd Bhyat 6 Янв 2018 в 13:41

1 ответ

Лучший ответ

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

Я изменил свой CSS на:

#banner{display:none;}

Затем я добавил строку javascript, которая будет показывать этот идентификатор после инициализации гибкого слайдера.

jQuery('div#banner').show();

Теперь сайт загружает остальной контент, а затем загружает гибкий слайдер.

0
Zayd Bhyat 8 Янв 2018 в 07:02