0

I am using a horizontal image viewer with lazyload.js and mCustomScrollbar

I can get it to work however I do not think my code is sound and there is a lag when the pages loads before I can click, drag or scroll the slider.

This post was very helpful, but not 100% there. I believe every time I scroll the page the code is being re outputted?

I am using the following code for the lazy load:

<script>
  jQuery(function() {
    jQuery("img.lazy").lazyload({
container: jQuery("#slider"),  
skip_invisible : false,
});
jQuery(window).resize();
  });
jQuery(window).load(function() {
jQuery(window).resize();    
});
</script>

and this is the code for the custom scrollbar

<script>
(function($){
    $(window).load(function(){
        $("#slider").mCustomScrollbar({
axis:"x",
            scrollButtons:{
                enable:true
            },
scrollButtons:{ enable: true },
autoDraggerLength: false,
theme:"dark-thin",
mouseWheel:{ preventDefault: true },
mouseWheel:{ invert: true},
            callbacks:{
                whileScrolling:function(){ WhileScrolling(); } 
            }
        });
        function WhileScrolling(){
            $("img.lazy").lazyload();
        }
    });
})(jQuery);
</script>

Any input would be greatly appreciated.

Jack Cash
  • 129
  • 1
  • 5
  • 18
  • Use lazysizes instead of jquery lazyload and it should work automatically without any strange code. https://github.com/aFarkas/lazysizes – alexander farkas Mar 09 '16 at 13:00
  • Nice plugin, but it ins't working automatically. The custom scroll bar won't load because the content in the slider window isn't fully loaded. Is there a way to load the spacing the images would take up but not the actual image? – Jack Cash Mar 10 '16 at 18:15
  • https://github.com/aFarkas/lazysizes/#tip-specifying-image-dimensions-minimizing-reflows-and-avoiding-page-jumps – alexander farkas Mar 10 '16 at 21:02

0 Answers0