记住滑块位置和延迟加载 - bxslider - Remember the slider position and lazy load - bxslider

Remember the slider position and lazy load - bxslider

本文关键字：延迟加载 bxslider 位置 | 更新日期: 2023-09-27

我在我的网站上使用了bxslider，它工作得很好。但是，我有一个问题：

我的滑块总共有大约 15 张图像，屏幕上的任意位置显示 2 张。有没有办法安排，例如当用户加载页面时，只下载 2 个，当她单击下一个时，才下载下一个 2 个，这样页面加载就不会永远占用？

谢谢！

我遇到了同样的问题，最终得到了以下解决方案：

.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

希望对您有所帮助！