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

Question

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

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

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

Спасибо!

0

bxslider css html javascript php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

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

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

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

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

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

Надеюсь, это поможет!

0