bxSlider lazy load images

bxSlider lazy load images

by Petr Haluza

HTML

<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<div class="slider">
    <div>
        <img class="lazy" src="https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif" data-src="https://placehold.it/200x150/000/fff.png&text=SLIDE+1">
    </div>
    <div>
        <img class="lazy" src="https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif" data-src="https://placehold.it/200x150/b50/fc3.png&text=SLIDE+2">
    </div>
    <div>
        <img class="lazy" src="https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif" data-src="https://placehold.it/200x150/92f/ddd.png&text=SLIDE+3">
    </div>
    <div>
        <img class="lazy" src="https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif" data-src="https://placehold.it/200x150/5be/000.png&text=SLIDE+4">
    </div>
    <div>
        <img class="lazy" src="https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif" data-src="https://placehold.it/200x150/04d/f6a.png&text=SLIDE+5">
    </div>
    <div>
        <img class="lazy" src="https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif" data-src="https://placehold.it/200x150/b6b/951.png&text=SLIDE+6">
    </div>
    <div>
        <img class="lazy" src="https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif" data-src="https://placehold.it/200x150/fff/000.png&text=SLIDE+7">
    </div>
</div>

CSS

.slider div {
    height: 220px;
    position: relative;
}
.lazy {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-16px;
    margin-left:-16px;
}

JavaScript

$(function () {
    var page = 0;
    var maxSlides = 5;
    // create an options object to store your slider settings
    var slider = $('.slider').bxSlider({
        minSlides: 1,
        maxSlides: maxSlides,
        auto: true,
        slideWidth: 150,
        slideMargin: 35,
        startSlide: page,
        onSliderLoad: function () {
            var $sliderImgs = $(".slider img");
            var start = page * maxSlides + maxSlides;
            var stop = start + maxSlides;
            for (var i = start; i < stop; i++) {
                var selecter = '[data-src="' + $sliderImgs.eq(i).data('src') + '"]';
                $(selecter).attr('src', $(selecter).data('src')).one('load', function () {
                    $(this).removeClass('lazy');
                });
            }
        },
        onSlideBefore: function () {
            page = slider.getCurrentSlide();
            var $sliderImgs = $(".slider img");
            var start = page * maxSlides + maxSlides;
            var stop = start + maxSlides;
            for (var i = start; i < stop; i++) {
                var selecter = '[data-src="' + $sliderImgs.eq(i).data('src') + '"]';
                $(selecter).attr('src', $(selecter).data('src')).one('load', function () {
                    $(this).removeClass('lazy');
                });
            }
        }
    });
});