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。