Utilizzo della muratura con immagini caricate

Question

Sono un principiante js e spero che queste domande non sembrino troppo stupide.

Sto utilizzando la muratura per il mio sito - funziona perfettamente. Volevo far apparire le mie scatole solo quando la muratura finiva di caricare. Cercando in Internet ho trovato diversi post che raccomandavano l'uso di plug-in imagesloaded per risolvere questo problema. Semplicemente non cambia nulla. Ciò significa che il mio layout e le finestre dei contenuti continueranno a essere incasinati fino a quando la muratura non finirà di caricare, solo che le scatole salteranno improvvisamente nelle loro giuste posizioni.

Il mio codice:

$(document).ready(function() { 

    var $container = $('#post-area'); 
    $container.imagesLoaded(function() { 
     $container.masonry({ 
      itemSelector : '.box', 
      columnwidth: 300, 
      gutter: 20, 
      isFitWidth: true, 
      isAnimated: !Modernizr.csstransitions 
     });  
    }); 
}); 

Sto anche ottenere questo Firebug-errore:

TypeError: EventEmitter is not a constructor 
ImagesLoaded.prototype = new EventEmitter(); 

Sto caricando i js imagesloaded come questo alla fine del mio sito web (non potevo' trovare informazioni se le immagini caricate sono già incluse nella muratura o no, alcuni hanno scritto che non è più incluso - confuso):

<script src="http://www.domainname.com/js/imagesloaded.js"></script> 

Sarei davvero felice se qualcuno potesse aiutarmi. E dimmi se imagesloaded è anche il plugin giusto per risolvere questo problema!

Answer 1

imagesLoaded non è incluso nella Massoneria, quindi è necessario utilizzare plugin separato. Consiglierei di usare la versione .min compilata.

Per quanto riguarda il problema con le immagini impilate: il problema non è nelle immagini. Non è stato utilizzato né in muratura. Nel tuo codice imagesLoaded sta aspettando fino a quando tutte le immagini sono state caricate e quindi attiva la muratura. Dopo aver caricato tutte le immagini, il plug-in Masonry può definire correttamente le proprie dimensioni e inserire la griglia. Prima di ciò, il browser carica le immagini come di consueto e le visualizza in base al CSS definito, ecco perché sono incasinate.

Una delle possibili soluzioni è quella di nascondere gli elementi di default e quindi fadein mentre confermano imagesLoaded, che le immagini caricate:

$(document).ready(function() { 

    var $boxes = $('.box'); 
    $boxes.hide(); 

    var $container = $('#post-area'); 
    $container.imagesLoaded(function() { 
    $boxes.fadeIn(); 

    $container.masonry({ 
     itemSelector : '.box', 
     columnwidth: 300, 
     gutter: 20, 
     isFitWidth: true, 
     isAnimated: !Modernizr.csstransitions 
    });  
    }); 
}); 

Answer 2

Un'altra soluzione è quella di inizializzare Massoneria .load all'interno $ (window)() al posto di $ (document) .ready(). In tal modo, la Massoneria, dopo tutti i media sulla pagina è caricata - immagini, i caratteri, script esterni e fogli di stile, ecc

$(window).load(function(){ 
    $('#container').masonry({ 
     // options... 
    }); 
}); 

Answer 3

Installare

npm install masonry-layout --save 

npm install imagesloaded --save 

Poi js vaniglia opzioni sarebbero

'use strict' 

const Masonry = require('masonry-layout') 
const imgloaded = require('imagesloaded') 
const elem = document.querySelector('.grid') 
var imgLoad = imgloaded(elem) 
    function onAlways() { 
     const msnry = new Masonry(elem, { 
      // options 
      columnWidth: '.grid-sizer', 
      // do not use .grid-sizer in layout 
      itemSelector: '.grid-item', 
      percentPosition: true, 
      gutter: 10 
     }) 
    // console.log('all images are loaded') 
} 
if (elem) { 
    // bind with .on() 
    imgLoad.on('always', onAlways) 
    // unbind with .off() 
    // imgLoad.off('always', onAlways) 
} 

Quindi controllare la console per tutte le immagini sono state caricate.