Carico pigro + isotopo
-
12-12-2019 - |
Domanda
Ho speso una notevole quantità di tempo cercando di ottenere isotopo e caricamento pigro che lavorano insieme.
Il problema: Lazy Loading funziona se l'utente scorre verso il basso, tuttavia se l'utente utilizza i filtri, gli elementi vengono visualizzati in alto ma le immagini non verranno caricate.
Ecco qualcuno con lo stesso problema, ma sembra che lo abbia risolto.Ho provato diverse cose ma non riuscivo a farlo funzionare.
Ecco la Dicussion https://github.com/tuupola/jquery_lazyload/issues/51
Soluzione
Per ottenere l'ordinamento / filtraggio dell'isotopo per funzionare con il pigro carico devi fare quanto segue.
jQuery(document).ready(function($) {
var $win = $(window),
$con = $('#container'),
$imgs = $("img.lazy");
$con.isotope();
$con.on('layoutComplete', function(){
$win.trigger("scroll");
});
$imgs.lazyload({
failure_limit: Math.max($imgs.length - 1, 0)
});
});
.
Spiegazione
Secondo i documenti ( http://www.appelsiini.net/projects/lazyload )
.Dopo la pagina scorrevole Lazy Loop Loops sebbene immagini scaricate. In loop controlla se l'immagine è diventata visibile. Per impostazione predefinita Loop viene interrotto quando viene trovata la prima immagine sotto la piega (non visibile). Questo si basa sulla seguente assunzione. L'ordine delle immagini a pagina è uguale all'ordine delle immagini in codice HTML. Con alcuni layout ipotesi che potrebbero essere sbagliati.
Con un elenco di isotopo ordinato / filtrato, l'ordine della pagina è certamente diverso dall'HTML, quindi è necessario regolare il nostro
failure_limit
.Come puoi vedere memorizzare l'oggetto jQuery in modo che possiamo usare il suo
length-1
come il nostro fallimento_limit. Se sei curioso del motivo per cui èlength-1
, è a causa del seguente controllo del metodo di aggiornamento del Check-Load..if (++counter > settings.failure_limit) { return false; }
Lazy Load su altri eventi
Se non si attiva il tuo pigro locale sul rotolo, è necessario scambiare il trigger "Scroll" per qualsiasi evento che stai utilizzando.
Demo
http://jsfiddle.net/arthurc/znehn/
Codice per il tuo sito
Ho memorizzato alcuni degli oggetti jquery in variabili in quanto devono essere riutilizzati.
.jQuery(document).ready(function($) { var $window = $(window); var $images = $('#big_container .media_block img'); var $big_container = $('#big_container'); $images.each(function(index) { var item_height = $(this).attr("height"); $(this).parent().parent().css("height",item_height); }); $big_container.isotope({ itemSelector : '.item', layoutMode : 'masonry', masonry: { columnWidth: 5, }, sortBy : 'date', sortAscending : false, getSortData : { date : function ( $elem ) { return $elem.find('.date').text(); // Date format should be [Y-m-d H:i] }, views : function( $elem ) { return parseInt( $elem.attr('data-views'), 10 ); }, //featured : function ( $elem ) { // return $elem.attr('data-featured'); // }, rates : function( $elem ) { return parseInt( $elem.attr('data-rates'), 10 ); }, comments : function( $elem ) { return parseInt( $elem.attr('data-comments'), 10 ); } } }); $big_container.on('layoutComplete', function(){ $win.trigger("scroll"); }); $('#sort-by li a').click(function(){ var $this = $(this); if ($(this).parent().hasClass('selected') ) { return false; } var $optionSet = $this.parents(); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); var sortName = $(this).attr('href').slice(1); $big_container.isotope({ sortBy : sortName }); return false; }); $images.lazyload({ failure_limit : Math.max($images.length-1, 0); }) });