Помните положение ползунка и ленивую нагрузку - bxslider

Question

Я использую на своем сайте bxslider, и он отлично работает. Однако у меня есть вопрос:

У моего ползунка всего около 15 изображений, а 2 показаны в любой точке экрана. Есть ли способ иметь такую ​​компоновку, как когда пользователь загружает страницу, загружаются только 2, и когда она нажимает дальше, только затем загружаются следующие 2, так что загрузка страницы не выполняется навсегда?

Спасибо!

Answer 1

у меня был тот же самый вопрос, и в конечном итоге следующим раствором:

HTML:

<ul class="slider"> 
    ... 
    <li class="slide"> 
     <img src="[PLACEHOLDER IMAGE]" data-src="[ACTUAL IMAGE]"> 
    </li> 
    ... 
</ul> 

Javascript:

function loadSlide(slider, $element) { 
    var page = slider.getCurrentSlide(), 
     visible = Math.floor($element.closest('.bx-viewport').width()/$element.find('.slide').width()), 
     slides = $element.find('.slide:not(.bx-clone)'), 
     firstSlide = slides.eq(page * visible); 

    for (var i = 0; i < visible; i++) { 
     var img = firstSlide.find('img'), 
      imgSrc = img.attr('data-src'); 

     if (imgSrc && imgSrc !== '') { 
      img.hide().attr('src', imgSrc).fadeIn().removeAttr('data-src'); 
     } 

     firstSlide = firstSlide.next('.slide'); 
    } 
} 

// init bxSlider 
$('.slider').each(function(idx, el) { 
    var $el = $(el), 
     thisSlider = $el.bxSlider({ 
      // config options 
      onSlideBefore: function() { 
       loadSlide(thisSlider, $el); 
      } 
    }); 
}); 

Некоторые замечания:

1. Я инициализируется сценарий с использованием $.each, а не просто потому, что $('.slider').bxSlider() bxSlider не передавая ссылку на экземпляр ползунка, и мне нужно, что использовать метод getCurrentSlide.
2. getCurrentSlide позволяет нам узнать, к какой странице мы переезжаем, поэтому мы можем использовать это, чтобы выяснить, какой элемент является первым на этой странице. У меня возникли проблемы с получением этой информации строго из bxSlider, но это, вероятно, проще, чем я это делаю.
3. Поскольку он перемещается по изображениям на слайде, он освобождается, если у них нет атрибута data-src. Если это так, оно заменяет его атрибутом src и уменьшает его изображение.
4. Убедитесь, что ваша первая страница изображений ссылается на допустимые изображения, так как она настроена только для обработки, когда ползунок меняет страницы.
5. Я на 90% уверен, что мое решение бесполезно сложно, но оно работает для меня.

Вы можете проверить рабочий пример здесь: http://codepen.io/a_double/pen/RNaRZw

Надежда, что помогает!