Używanie muru z obrazami załadowanymi

Question

Jestem nowicjuszem js i mam nadzieję, że to pytanie nie wydaje się zbyt głupie.

Używam kamienia na mojej stronie - działa dobrze. Chciałem, aby moje pola pojawiały się tuż po załadowaniu muru. Szukając w Internecie znalazłem kilka postów zalecających użycie imagesloaded Plugin do rozwiązania tego problemu. Po prostu nic nie zmienia. Oznacza to, że mój układ i zawartość są pomieszane, dopóki nie skończy się ładowanie muru, a wtedy skrzynie nagle przeskoczą na właściwe pozycje.

Mój kod:

$(document).ready(function() { 

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

Ja również otrzymuję ten firebug-błąd:

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

mam ładowania imagesloaded js, jak to pod koniec mojej stronie (nie mogłem” t znaleźć żadnych informacji, jeśli imagesloaded jest już zawarta w murze lub nie, niektórzy napisali, że nie jest już włączone - mylące):

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

Byłbym bardzo szczęśliwy, gdyby ktoś mógł mi pomóc. I powiedz mi, czy obrazy są nawet właściwą wtyczką do rozwiązania tego problemu!

Answer 1

imagesLoaded nie znajduje się w masonerii, więc powinieneś użyć oddzielnego plugin. Polecam używać skompilowanej wersji .min.

Odnośnie problemu z ułożonymi obrazami: problem nie występuje na obrazach. Nie został usunięty z masonerii. W obrazie koduLoaded czeka na załadowanie wszystkich obrazów, a następnie odpala mur. Po załadowaniu wszystkich obrazów, wtyczka Masonry może poprawnie zdefiniować ich rozmiary i umieścić na siatce. Wcześniej przeglądarka ładuje obrazy jak zwykle i wyświetla je zgodnie ze zdefiniowanym CSS, dlatego są pomieszane.

Jednym z możliwych rozwiązań jest ukrycie elementów domyślnie i następnie fadein podczas imagesLoaded potwierdzają, że obrazy ładowane:

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

Innym rozwiązaniem jest, aby zainicjować Masonry wewnątrz $ (okno) .load() zamiast $ (document) .ready(). Spowoduje to murarski po wszystkie media na stronie załadował - obrazów, czcionek i stylów zewnętrznych skryptów itp

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

Answer 3

Install

npm install masonry-layout --save 

npm install imagesloaded --save 

Następnie opcje waniliowe js byłoby

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

Następnie sprawdź konsolę, czy załadowane są wszystkie obrazy.