Карусель Lazy Load Owl с Picturefill

Я использую плагины Owl Carousel и Picturefill, и я хотел бы лениво загружать основные изображения слайдера. Любая помощь будет оценена по достоинству. В URL-адресе примера нажмите на миниатюру «Адаптивный» (второе изображение после миниатюры YouTube). Затем разверните/сверните окно браузера, и вы увидите, что указанное изображение обновляется в зависимости от размера браузера.

Пример URL:

http://dx1showroom.azurewebsites.net/picturefill/2.html

Цели:

• Используйте Owl Carousel - www.owlcarousel.owlgraphic.com
• С Picturefill — http://scottjehl.github.io/picturefill/
• Синхронизация со вторым ползунком карусели совы
• И основной ползунок ленивой загрузки

У меня работает:

• Карусели с совами работают
• Синхронизированные карусели (основной слайдер и слайдер миниатюр)
• Загрузка изображений с помощью Picturefill

HTML:

<div class="thumbnail-frame">
    <div id="sliderStatus" class="image-count">
        <span class="glyphicon icon-camera"></span>
        <span class="currentItem"><span class="result"></span></span>/<span class="owlItems"><span class="result"></span></span>
    </div>

    <div id="slideshow-main" class="owl-carousel main-frame col-sm-8 col-md-8 col-lg-9">
        <div class="item video"><iframe width="563" height="422" src="//www.youtube.com/embed/GZL6piSl5P8?rel=0" frameborder="0" allowfullscreen></iframe></div>
        <div class="item">
            <picture>
                <!--[if IE 9]><video style="display: none;"><![endif]-->
                <source srcset="http://placehold.it/1300x867" media="(min-width: 1200px)">
                <source srcset="http://placehold.it/1000x667" media="(min-width: 992px)">
                <source srcset="http://placehold.it/800x533" media="(min-width: 768px)">
                <source srcset="http://placehold.it/650x433" media="(min-width: 600px)">
                <source srcset="http://placehold.it/460x307" media="(min-width: 400px)">
                <source srcset="http://placehold.it/320x213" media="(min-width: 100px)">
                <!--[if IE 9]></video><![endif]-->
                <img srcset="http://placehold.it/1300x867" alt="Picturefill Test">
            </picture>
        </div>
        <div class="item video"><iframe width="563" height="422" src="//www.youtube.com/embed/akhmS1D2Ce4?rel=0" frameborder="0" allowfullscreen></iframe></div>
        <div class="item">
            <picture class="lazyOwl">
                <!--[if IE 9]><video style="display: none;"><![endif]-->
                <source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg" media="(min-width: 1200px)">
                <source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=1000" media="(min-width: 992px)">
                <source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=800" media="(min-width: 768px)">
                <source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=650" media="(min-width: 600px)">
                <source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=460" media="(min-width: 400px)">
                <source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=320" media="(min-width: 100px)">
                <!--[if IE 9]></video><![endif]-->
                <img srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg" alt="Picturefill Test">
                </picture>
            </div>    
        </div>

        <div id="slideshow-thumbnails" class="owl-carousel thumbnail-frame">
            <div class="item"><a><img src="http://img.youtube.com/vi/GZL6piSl5P8/1.jpg" alt="" class="img-responsive"></a></div>
            <div class="item"><a><img src="http://placehold.it/135x90&amp;text=Responsive" alt="" class="img-responsive"></a></div>
            <div class="item"><a><img src="http://img.youtube.com/vi/akhmS1D2Ce4/1.jpg" alt="" class="img-responsive"></a></div>
            <div class="item"><a><img src="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=300" alt="" class="img-responsive"></a></div>
        </div>
    </div>

JavaScript:

$(document).ready(function() {

    // Owl Slider Function
    function sync(el){
        var current = this.currentItem;
        $("#slideshow-thumbnails")
            .find(".owl-item")
            .removeClass("synced")
            .eq(current)
            .addClass("synced")
        if($("#slideshow-thumbnails").data("owlCarousel") !== undefined){
            center(current)
        }

        updateResult(".owlItems", this.owl.owlItems.length);
        updateResult(".currentItem", this.owl.currentItem +1);
    }

    // Owl Slider Function
    function center(number){
        var owlSync2visible = owlSync2.data("owlCarousel").owl.visibleItems;
        var num = number;
        var found = false;

        for(var i in owlSync2visible){
            if(num === owlSync2visible[i]){
                var found = true;
            }
        }

        if(found===false){
            if(num>owlSync2visible[owlSync2visible.length-1]) {
                owlSync2.trigger("owl.goTo", num - owlSync2visible.length+2)
            } else {
                if(num - 1 === -1){
                    num = 0;
                }
                owlSync2.trigger("owl.goTo", num);
                }
        } else if(num === owlSync2visible[owlSync2visible.length-1]) {
            owlSync2.trigger("owl.goTo", owlSync2visible[1])
        } else if(num === owlSync2visible[0]){
            owlSync2.trigger("owl.goTo", num-1)
        }
    }

    function updateResult(pos,value){
        sliderStatus.find(pos).find(".result").text(value);
    }


    // Owl Slider
    var sliderStatus = $("#sliderStatus");

    var owlSync1 = $("#slideshow-main").owlCarousel({
        singleItem : true,
        slideSpeed : 500,
        navigation: true,
        pagination: false,
        // itemsScaleUp: true,
        afterAction : sync,
        responsiveRefreshRate : 200,
        navigation: true,
        navigationText: [
            '<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>',
            '<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>'
        ],
        afterUpdate : function() {
            sliderMainMaxHeight('#slideshow-main');
            posSliderControls('#slideshow-main');
            posAlignImgVertically('#slideshow-main');
        }
    });

    var owlSync2 = $("#slideshow-thumbnails").owlCarousel({
        items : 8,
        itemsDesktop      : [1199,8],
        itemsDesktopSmall     : [992,8],
        itemsTablet       : [768,6],
        itemsMobile       : [520,3],
        pagination:false,
        responsiveRefreshRate : 100,
        scrollPerPage: true,
        navigation: true,
        navigationText: [
            '<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>',
            '<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>'
        ],
        afterInit : function(el){
            el.find(".owl-item").eq(0).addClass("synced");
        },
        afterUpdate : function() {
            sliderMainMaxHeight('#slideshow-thumbnails');
            posSliderControls('#slideshow-thumbnails');
            posSliderImgCounter('#slideshow-thumbnails');
            posAlignImgVertically('#slideshow-thumbnails');
        }
    });

    $("#slideshow-thumbnails").on("click", ".owl-item", function(e){
        e.preventDefault();
        var number = $(this).data("owlItem");
        owlSync1.trigger("owl.goTo",number);
    });

    $(".owl-carousel").fitVids();;
});