Combinando LazyLoad e Jquery Masonry

Question

Ho cercato di mettere insieme gli strumenti di muratura e moo lazyload, ma entrambi non sembrano andare molto bene insieme, anche se forse potrebbe essere solo perché sono un po 'inutile nella codifica!

La muratura funziona su this page.

Tuttavia, quando provo a metterlo insieme a lazyload, sembra che tutto vada a male. Qualcuno ha qualche idea su come implementare entrambi i plugin insieme?

Ho trascorso 6 giorni cercando di capirlo e questa è la mia speranza finale ha!

Grazie

Answer 1

La ragione è che la massoneria deve conoscere le dimensioni dell'immagine per tracciare gli articoli correttamente. Tuttavia, LazyLoad ritarda il caricamento dell'immagine fino a quando l'immagine non si trova nella vista, il che significa che l'immagine non avrà dimensioni (o avrà le dimensioni dell'immagine fittizia/segnaposto impostata come img src).

Answer 2

Recentemente, devo risolvere questo per uno dei miei siti web. Ho provato un paio di modi e sembra funzionare.

1. Primo metodo:

• carico muratura sulle voci
• Mettere un supporto posto su tutte le immagini e l'uso lazyload su di loro
• Ora, quando ogni immagine del fuoco lazyload.load callback , ricaricare in muratura -> una serie di muratura ('reload') [jsfiddle aggiornato con nuove immagini, più facile per illustrare il punto]

http://jsfiddle.net/7vEJM/8/

var $container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.item', 
     columnWidth: function(containerWidth){ 
      return containerWidth/12; 
     } 
    }); 
    $('.item img').addClass('not-loaded'); 
    $('.item img.not-loaded').lazyload({ 
     effect: 'fadeIn', 
     load: function() { 
      // Disable trigger on this image 
      $(this).removeClass("not-loaded"); 
      $container.masonry('reload'); 
     } 
    }); 
    $('.item img.not-loaded').trigger('scroll'); 
}); 

Questo metodo è buono, ma ha uno svantaggio. Il layout della griglia non può essere mantenuto lo stesso dato che il tempo di masonry.reload() dipende dal tempo di caricamento di ciascuna immagine (cioè quella supposta da caricare prima potrebbe concretizzare solo in seguito)

2. Secondo metodo: Guardate siti come pinterest, penso, non segue il primo metodo, perché hanno le scatole dei contenitori disposte prima ancora di qualsiasi immagine caricata, quindi, quello che ho cercato di ottenere è di mostrare solo le scatole con lo stesso rapporto delle immagini. I passi sono:

• Far passare la vostra dimensione immagini (solo restituisce un JSON come {image1: [300,400],image2: [400,500]})
• Usa trucco CSS per rendere scatola div ridimensionare secondo il contenitore.Ho trovato questo trucco here
• carico pigri come normale, non c'è bisogno di innescare qualsiasi ricarica fin da ora, senza l'immagine, le caselle sono ALR disposte correttamente

http://jsfiddle.net/nathando/s3KPn/4/

var $container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.item', 
     columnWidth: function(containerWidth){ 
      return containerWidth/12; 
     } 
    }); 
    $('.item img').lazyload({ 
     effect: 'fadeIn' 
    }); 
    $('.item img').trigger('scroll'); 
}); 

[A cura di aggiungi il jsfiddle per il secondo metodo]

Avviso:

• In questo violino, inserisco manualmente il rapporto altezza/larghezza di ogni immagine in 'padding-bottom: xxx%' che deve essere passato dal codice del server (fare riferimento al punto 1)
• Aggiunto in un bordo per fare scatole visibile
• per illustrare che le caselle saranno organizzati anche quando le immagini non caricate, provare a rimuovere il commento /*display: none */ e commentare display: block per #container.fluid .item img

Acclamazioni

Answer 3

ho postato la stessa risposta su altre stessi problemi articolo. Se hai il problema di sovrapporre le immagini, ho trovato la soluzione nel sito sottostante, sebbene sia in giapponese.

http://www.webdesignleaves.com/wp/jquery/1340/

Spero che questo vi aiuterà.

Il punto è il seguente;

$('img.lazy').load(function(){ ... }) 

HTML

<div id="works_list"> 
<div class="work_item"> 
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt=""> 
<p>title 1</p> 
</div><!-- end of .work_item--> 
<div class="work_item"> 
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt=""> 
<p>title 2</p> 
</div><!-- end of .work_item--> 
.... 
</div><!-- end of #works_list -->  

jQuery

$("img.lazy").lazyload({ 
    effect: 'fadeIn', 
    effectspeed: 1000, 
    threshold: 200 
}); 

$('img.lazy').load(function() { 
    masonry_update(); 
}); 

function masonry_update() {  
    var $works_list = $('#works_list'); 
    $works_list.imagesLoaded(function(){ 
     $works_list.masonry({ 
      itemSelector: '.work_item',　 
      isFitWidth: true,　 
      columnWidth: 160 
     }); 
    }); 
}  

Answer 4

può essere qualcuno avrà problemi anche, la speranza di aiuto.

per farlo funzionare con wordpress photoswipe-masonry theme è impossibile senza modifica del plugin.

accanto è legata a questa modifica e solo con muratura

a) uso lazyload dati originali = "xxx" attributo per impostare URL immagine. NON src. per te è necessario posizionare un segnaposto. potrebbe essere 1x1 pixel che verrà caricato senza lazyload.

b) questo segnaposto deve coprire TUTTO lo spazio per la futura immagine lazyloaded, OPPURE la muratura renderà tutte le immagini visibili come vista lazyloading. è perché prima delle immagini caricate ha zero dimensioni 0px x 0px. e tutte le immagini si adattano all'area visibile prima del caricamento. Lazyload conta tutto come visibile e carica tutto.

di organizzare tutti lo spazio per un'immagine futuro è necessario impostare

style = "width: xxpx; altezza: xxpx;"

solo width = "xx" e height = "xx" non è sufficiente

così un'immagine segnaposto divenne come:

<img src="http:..1x1px" data-original="http://real_image" style="width:xxpx;height:xxpx;"> 

quindi applicare carico pigro modo normale, e muratura. in qualsiasi ordine .

Importante - muratura larghezza aggiornamento per la sua dimensione di colonna, ma non l'altezza, quindi se il vostro dimensioni delle colonne = 50px, quindi è necessario calcolare altezza del segnaposto

new_height = 50/actual_width * actual_height;

così per tema wordpress bisogno

$scaled_height =$options['thumbnail_width']/$full[1] * $full[2]; 

.....

    <img src="http://xxxx/1x1px.jpg" data-original='. $thumb[0] .' itemprop="thumbnail" alt="'.$image_description.'" style="width:'.$full[1].'px;height:'.$scaled_height.'px;" width="'.$full[1].'" height="'.$full[2].'"/> 

....

quindi aggiungere nuove linee di sotto muratura init

 var reloading = false; 
        $.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',function(){ 



           \$('.msnry_item img').lazyload({ 
            effect: 'fadeIn', 
            //container: container, 
            threshold : 200, 
            skip_invisible : false, 
            failure_limit : 5, 
            load: function() { 
             if(! reloading) 
             { 
             reloading = true; 
             setTimeout(function(){ 
               container.masonry('reload'); 
               reloading = false; 
             }, 500); 

            } 
            } 
           }); 

        }); 

Answer 5

la risposta di softk5 non funzionava per me e causando il blocco sulla maggior parte del browser. Ecco il mio codice seguente e funziona per me.

jQuery(document).ready(function(){ 
    jQuery("img.lazy").lazyload({ 
     effect: 'fadeIn', 
     effectspeed: 1000, 
     threshold: 200, 
     load:function(){ 
      var $container = jQuery('.is_masonry'); 
      $container.masonry({ 
      }).imagesLoaded(function() { $container.masonry(); }); 

     } 
    }); 

});