Lazy Load Owl Carousel with Picturefill-open source projects scottjehl/picturefill

I am using the Owl Carousel and Picturefill plugins and I would like to lazy load the main slider images. Any help would be appreciated. In the example url, click on the “Responsive” thumbnail (second image after the YouTube thumbnail). Then expand/contract your browser window and you should see the image referenced being updated depending on the size of the browser.

Example url:

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

Goals:

I have working:

• Owl carousels are working
• Synced carousels (main & thumbnail sliders)
• Loading images with Picturefill

HTML:

    
        
        /
    

    
        
        
            
                
                
                
                
                
                
                
                
                
            
        
        
        
            
                
                
                
                
                
                
                
                
                
                
                
        

        
            
            
            
            
        
    

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: [
            '',
            ''
        ],
        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: [
            '',
            ''
        ],
        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();;
});