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

有些说明：

我使用$.each而不是$('.slider').bxSlider()初始化了脚本，因为bxSlider没有将引用传递给滑块实例，我需要使用getCurrentSlide方法。
getCurrentSlide让我们知道我们要移动到哪个页面，因此我们可以使用它来确定该页面上的第一个元素。我无法从bxSlider严格获取该信息，但它可能比我制作它更容易。
当它在幻灯片上移动图像时，如果它们没有data-src属性，它就会失效。如果是，则用它替换src属性，并淡化图像。
确保您的第一页图像引用有效图像，因为这只是设置为在滑块更改页面时进行处理。
我90％确定我的解决方案不必要复杂，但它对我有用。

您可以在此处查看一个有效的示例：http://codepen.io/a_double/pen/RNaRZw

希望有所帮助！

记住滑块位置和延迟加载 - bxslider

1 个答案: