jQuery barra di scorrimento su misura e carico pigro

Question

Ho contenitore con il contenuto personalizzato scroller jQuery custom content scroller: Questo codice:

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

E vorrei usarlo con Lazy Load:

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

penso che dovrebbe funzionare con la funzione callbacks dalla pagina Scroller ma non sto bene con jquery, quindi i miei risultati non hanno successo.

Quando uso il mio codice come qui di seguito carica tutte le immagini in caricamento della pagina:

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

L'AUTHOS dice che questo può essere fatto scrivendo una semplice funzione js e chiamarla sul whileScrolling evento.

Grazie per qualsiasi aiuto.

Answer 1

penso che l'autore intende inoltre aggancio in caso whileScrolling in questo modo:

(function($){ 

    $(window).load(function(){ 

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

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

    }); 

})(jQuery); 

in cui il contenitore HTML è simile al seguente:

 

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

Per ridurre il numero di lazyload() durante lo scorrimento, potremmo usare ad esempio lo mcs.top immobili per la posizione superiore del contenuto di scorrimento (pixel):

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

dove restringiamo il selettore layzload, quindi non c'è bisogno di trovare tutte le immagini in tutto l'albero DOM.

Ho notato che in Internet Explorer 11, il mcs.top possono essere numeri floating ma è alwyas interi numeri interi in Chrome.

Quindi potremmo piano con Math.floor().

per ridurre ulteriormente il chiamate LazyLoad, potremmo inoltre confrontare mcs.top al suo valore precedente:

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

Il tuo tentativo di utilizzare container non funziona perché mCustomScrollbar non usa lo scorrimento contenitori, ma posizionamento relativo in un overflow: hidden contenitore per ottenere lo scrolling. L'approccio più pulito che posso pensare è quello di utilizzare un evento personalizzato [per attivare lazyload] [1]. Ecco come lo farei per il file di esempio dato da 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> 

Io uso anche una funzione di callback whileScrolling, ma solo per verificare quale delle img.lazy immagini sono visibili. Sono se la loro posizione relativa al contenitore non è più grande dell'altezza del contenitore meno la sua proprietà CSS top. (Supponendo di scorrere sempre in alto → in basso, questa impostazione non riconosce le immagini che sono invisibili perché lo si scorreva troppo in basso.) Per queste immagini, la funzione attiva quindi l'evento personalizzato lazyScroll, che è l'evento che lazyload utilizza per attivare il caricamento delle immagini.

Si noti che questa soluzione non è ancora molto portatile: Avresti per sostituire le query per la .mCSB_container e .mCustomScrollBox con quelli che si recuperano gli elementi associati alla casella di scorrimento corrente per lo script di lavorare in situazioni con più di uno mCustomScrollbar. In uno scenario reale, memorizzo anche gli oggetti jQuery invece di ricrearli su ogni invocazione del callback.

Answer 3

Infine ho scritto questo che può essere chiamato dal callback 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'); 

    } 

Se la dimensione dell'immagine è costante e l'elenco delle immagini è enorme, forse potrebbe essere la pena di cercare per la prima immagine utilizzando dicotomia poi calcolare l'intervallo di indici per i quali l'evento "compare" deve essere attivato utilizzando l'immagine nota e le dimensioni del contenitore e l'offset() dell'immagine corrispondente ...

Answer 4

Sto utilizzando i plugin Lazy Load con Custom Content Scroller e ho riscontrato lo stesso problema .

Quello che ha funzionato per me è stato quello di aggiungere un callback perwhileScrolling caso in cui il del mCustomScrollbar, all'interno del quale ho attivare l'evento di scorrimento di un contenitore che sto 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"); 
    } 
    } 
}); 

ho impostato le LazyLoad di proprietà skip_invisible true nella speranza di aumentare le prestazioni. Impostare su false se si riscontrano problemi comunque.