jQuery niestandardowy pasek przewijania i leniwy obciążenie

Question

mam pojemnik z zawartości Custom zmieniacza jQuery custom content scroller: ten kod:

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

I chciałbym używać go z Lazy Load:

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

myślę, że powinieneś pracować z funkcją zwrotną ze strony Scroller, ale nie jestem dobry z jquery, więc moje wyniki nie powiodły się.

Kiedy używam mojego kodu jak poniżej ładuje wszystkie obrazy na stronie obciążenia:

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

authos mówi można to zrobić pisząc prostą funkcję js i nazwać na whileScrolling imprezy.

Dzięki za pomoc.

Answer 1

Myślę, że autor rozumie dodatkowo spinanie do zdarzenia whileScrolling jak ten:

(function($){ 

    $(window).load(function(){ 

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

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

    }); 

})(jQuery); 

gdzie pojemnik HTML jest jak następuje:

 

<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> 
 

aby zmniejszyć numer lazyload() podczas przewijania, możemy użyć na przykład mcs.top nieruchomość na górnym stanowisku przewijaniu treści za (w pikselach):

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); 
    } 
} 

gdzie ograniczyć selektor layzload, więc nie mamy znaleźć wszystkie obrazy w całym drzewie DOM.

Zauważyłem, że w Internet Explorer 11 The mcs.top mogą być pływające numery, ale to alwyas całych liczb całkowitych w Chrome.

Więc mogliśmy podłoga to z Math.floor().

do dalszej redukcji połączeń LazyLoad, możemy dodatkowo porównać mcs.top do jego poprzednia wartość:

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

Twoja próba wykorzystania container nie działa, ponieważ mCustomScrollbar nie używa przewijanie pojemników, ale względne pozycjonowanie w overflow: hidden pojemnik do przewijania. Najczystsze podejście, jakie mogę sobie wyobrazić, to użycie niestandardowego [zdarzenia do uruchomienia lazyload] [1]. Oto jak zrobiłbym to dla pliku przykładzie podanym przez Hasan 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> 

Używam również whileScrolling zwrotnego, ale tylko w celu sprawdzenia, które z img.lazy obrazów są widoczne. Są one wtedy, gdy ich względna pozycja względem kontenera nie jest większa niż wysokość kontenera minus jego własność CSS top. (Zakładając, że zawsze przewijasz górny → w dół, to ustawienie nie rozpoznaje obrazów niewidocznych, ponieważ przewijano je zbyt głęboko.) W przypadku tych obrazów funkcja uruchamia niestandardowe zdarzenie lazyScroll, które jest zdarzeniem, które jest używane przez lazyload do ładowania obrazów.

Zauważ, że to rozwiązanie nie jest jeszcze bardzo przenośny: Trzeba by wymienić zapytań dla .mCSB_container i .mCustomScrollBox z tych, które po ciebie elementy związane z obecnym polu przewijania za scenariusz do pracy w sytuacjach, z więcej niż jeden mCustomScrollbar. W prawdziwym scenariuszu, ja również buforowałbym obiekty jQuery zamiast odtwarzać je po każdym wywołaniu wywołania zwrotnego.

Answer 3

Wreszcie napisałam to, że może być wywoływana z zwrotnego 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'); 

    } 

Jeśli rozmiar obrazu jest stała i lista obrazów jest ogromna, to może warto byłoby poszukiwanie pierwszego obrazu przy użyciu dychotomii następnie obliczyć zakres indeksów, dla których „występują” zdarzenie musi być wywołane przy użyciu znanych obrazów i kontenerów wymiary, a offset() z Image Matching ...

Answer 4

używam wtyczek Lazy Load z Custom Content Scroller i miał ten sam problem .

Co pracował dla mnie było, aby dodać oddzwanianie dowhileScrolling Event mCustomScrollbar, w ramach którego ja wyzwolić zdarzenie przewijania kontenera, że ​​jestem lazyloading:

/* 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"); 
    } 
    } 
}); 

ja ustawić LazyLoad-tych Właściwość skip_invisible na true w nadziei na zwiększenie wydajności. Ustaw na wartość false, jeśli wystąpią jakiekolwiek problemy.