jQuery的定制滚动条和延迟加载

Question

我容器使用自定义内容卷轴jQuery custom content scroller： 此代码：

(function($){ 
    $(window).load(function(){ 
     $(".content").mCustomScrollbar({ 
      scrollButtons: { enable: true }, 
      mouseWheelPixels: 250 
     }); 
    }); 
})(jQuery); 

而且我想用延迟加载使用它：

$(function() { 
    $("img.lazy").lazyload({ 
    effect : "fadeIn", 
    container: $(".content") 
    }); 
}); 

我认为这应该使用Scroller页面的回调函数，但我不擅长jquery，所以我的结果不成功。

当我使用我的代码像下面加载的所有图像在页面加载：

$(function() { 
    $("img.lazy").lazyload({ 
    effect : "fadeIn", 
    container: $(".mCSB_container") 
    }); 
}); 

的authos说，这可以通过编写一个简单的JS函数并调用它whileScrolling事件中完成。

感谢您的任何帮助。

Answer 1

我觉得还意味着笔者钩住whileScrolling事件是这样的：

(function($){ 

    $(window).load(function(){ 

     $("#content_1").mCustomScrollbar({ 
      scrollButtons:{ 
       enable:true 
      }, 
      callbacks:{ 
       whileScrolling:function(){ WhileScrolling(); } 
      } 
     }); 

     function WhileScrolling(){ 
      $("img.lazy").lazyload(); 
     } 

    }); 

})(jQuery); 

在HTML容器是这样的：

 

<div id="content_1" class="content"> 
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p> 
    <p> 
     <img class="lazy img-responsive" data-original="/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/> 
     <img class="lazy img-responsive" data-original="/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/> 
     <img class="lazy img-responsive" data-original="/img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/> 
     <img class="lazy img-responsive" data-original="/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/> 
     <img class="lazy img-responsive" data-original="/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/> 
     <img class="lazy img-responsive" data-original="/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/> 
    </p> 
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p> 
    <p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p> 
    <p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p> 
    <p>Etiam sed massa felis, aliquam pellentesque est.</p> 
    <p>the end.</p> 
</div> 
 

为了减少滚动期间的lazyload()号码，我们可以使用例如mcs.top属性为滚动内容的顶部位置（像素）：

function WhileScrolling() 
{ 
    // Debug: 
    // console.log('top: ' + mcs.top); 

    // Run lazyload in 10 pixel steps (adjust to your needs) 
    if(0 == mcs.top % 10) 
    { 
     // Run lazyload on the "div#conent_1" box: 
     $("#content_1 img.lazy").lazyload(); 

     // Debug: 
     //console.log('lazyload - mcs.top: ' + mcs.top); 
    } 
} 

，我们限制layzload选择，所以我们没有发现在整个DOM树的所有图像。

我注意到，在的Internet Explorer 11，在mcs.top可以是浮动的数字，但它在铬 alwyas整个整数。

所以我们可以楼它与Math.floor()。

为了进一步降低lazyload来电，我们可以附加比较mcs.top到它的前值：

var mcsTopPrev = 0; 
var mcsTop = 0; 
function WhileScrolling() 
{ 
    // Fix the Chrome vs Internet Explorer difference 
    mcsTop = Math.floor(mcs.top); 

    // Current vs previous 
    if( mcsTop != mcsTopPrev) 
    { 
     // Run lazyload in 10px scrolling steps (adjust to your needs) 
     if(0 == mcsTop % 10) 
     { 
      $("#cphContent_lReferences img.lazy").lazyload(); 
     } 
    } 
    mcsTopPrev = mcsTop; 
} 

Answer 2

您尝试使用container没有因为mCustomScrollbar工作，不使用滚动容器，但相对定位在overflow: hidden容器来实现滚动。我能想到的最简洁的方法是使用自定义[事件来触发lazyload] [1]。这里是我会做它由哈桑Gürsoy给出的示例文件：

<script> 
$(document).ready(function() { 
    var filledHeight = 250; 
    $(window).load(function() { 
     $(".scroll").height($(window).height() - filledHeight); 
     $(".scroll").mCustomScrollbar({ scrollButtons: { enable: true }, 
     mouseWheelPixels: 250, 
     callbacks: { whileScrolling: function() { 
      var scroller = $(".mCSB_container"); 
      var scrollerBox = scroller.closest(".mCustomScrollBox"); 
      $(".scroll img.lazy").filter(function() { 
       var $this = $(this); 
       if($this.attr("src") == $this.data("src")) return false; 
       var scrollerTop = scroller.position().top; 
       var scrollerHeight = scrollerBox.height(); 
       var offset = $this.closest("div").position(); 
       return (offset.top < scrollerHeight - scrollerTop); 
      }).trigger("lazyScroll"); 
      }}}); 

     $("img.lazy").lazyload({ event: "lazyScroll" }); 
    }); 
}); 
</script> 

我还使用了whileScrolling回调，但只检查其img.lazy图像是可见的。如果它们与容器的相对位置不大于容器的高度减去其CSS top属性。 （假设您总是向上→向下滚动;此设置无法识别因为滚动得太慢而无法看到的图像。）对于这些图像，该函数然后触发定制的事件，这是lazyload用来触发加载图像的事件。

注意，这个解决方案不是很便携尚未：你必须与那些获取你的脚本当前滚动框关联的元素的情况下工作超过用于替换.mCSB_container和.mCustomScrollBox查询一个mCustomScrollbar。在现实世界中，我还会缓存jQuery对象，而不是在每次调用回调时重新创建它们。

Answer 3

最后我写了这一点，可以从mCustomScrollbar回调被称为：

function lazyLoad(selector,container) {  

     var $container=$(container);    
     var container_offset=$container.offset(); 
     container_offset.bottom=container_offset.top+$container.height(); 

     $(selector,$container).filter(function(index,img){ 
     if (!img.loaded) {      
      var img_offset=$(img).offset();  
      img_offset.bottom=img_offset.top+img.height; 
      return (img_offset.top<container_offset.bottom && (img_offset.top>0 || img_offset.bottom>0)); 
     }                                   
     }).trigger('appear'); 

    } 

如果图像尺寸是恒定和图像列表是巨大的，也许它可能是值得寻找使用二分法则第一图像使用已知的图像和容器尺寸以及匹配图像的偏移量（）来计算必须触发“出现”事件的索引的范围...

Answer 4

我正在使用插件Lazy Load和Custom Content Scroller并且具有相同的问题。

什么工作对我来说是添加一个回调到mCustomScrollbar的whileScrolling事件，在其中我触发容器的滚动事件，我惰性加载：

/* Lazy load images */ 
$(".blog-items img.lazyload").lazyload({ 
    effect: "fadeIn", 
    effect_speed: 1000, 
    skip_invisible: true, 
    container: $(".blog-items") 
}); 

/* Custom scrollbar */ 
$(".blog-items").mCustomScrollbar({ 
    theme: "rounded-dark", 
    callbacks: { 
    whileScrolling: function() { 
     $(".blog-items").trigger("scroll"); 
    } 
    } 
}); 

我设置了lazyload的财产skip_invisible为真正希望提高性能。如果您遇到任何问题，请设置为false。