À l'aide de la maçonnerie avec imagesloaded

Je suis un débutant en js et espère que cette question ne semble pas trop stupide.

Je suis en maçonnerie pour mon site fonctionne très bien.
Je voulais que mes boîtes apparaissent seulement lorsque la maçonnerie fini de charger. Recherche sur internet j'ai trouvé plusieurs posts recommander d'utiliser imagesloaded Plugin pour résoudre ce problème. Il n'a tout simplement pas changer quoi que ce soit. Que signifie: ma présentation et le contenu des boîtes de continuer à être foiré jusqu'à ce que la maçonnerie fini de se charger, à seulement ensuite les cases soudainement saut à leurs positions correctes.

Mon code:

$(document).ready(function() {

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

Je suis également obtenir ce firebug-erreur:

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

Je suis le chargement de la imagesloaded js comme ceci à la fin de mon site (je ne pouvais pas trouver toutes les informations si imagesloaded est déjà inclus dans la maçonnerie ou pas, certains ont écrit qu'il n'est pas inclus plus de confusion):

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

Je serais vraiment heureux si quelqu'un pouvait m'aider. Et dites-moi si imagesloaded est même plus le droit de plugin pour résoudre ce problème!

OriginalL'auteur CaraMar | 2013-12-12

  1. 14

    imagesLoaded n'est pas inclus dans la Maçonnerie, de sorte que vous devriez utiliser des plugin. Je vous recommande d'utiliser compilé .min version.

    Au sujet de votre problème avec empilées les images: le problème n'est pas dans imagesLoaded ni en Maçonnerie.
    Dans votre code imagesLoaded est en attente jusqu'à ce que toutes les images chargées et puis les feux de la maçonnerie. Avoir toutes les images chargées, de la Maçonnerie plugin peut définir correctement leurs tailles et de les mettre sur la grille. Avant cela, le navigateur charge les images comme d'habitude et l'affichage de 'em en fonction de CSS, c'est pourquoi ils sont foiré.

    L'une des solutions possibles consiste à masquer les éléments par défaut, puis fadein tout imagesLoaded confirmer, que les images sont chargées:

    $(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
    });    
  });
});
    Grâce Leger. Cela m'a beaucoup aidé. Je viens de mettre la .zone par défaut caché en css (display:none), et laissez apparaître comme vous l'avez suggéré, avec fadeIn jquery. Sinon, il apparaissait toujours pour un millième de seconde avant il était cachée à nouveau.
    .Emballés (minimisé) version a fonctionné pour moi: imagesloaded.desandro.com/imagesloaded.pkgd.min.js

    OriginalL'auteur Leger

  2. 8

    Une autre solution consiste à initialiser la Maçonnerie à l'intérieur de $(window).load() au lieu de $(document).ready(). Cela va déclencher la Maçonnerie après tous les médias sur la page est chargée des images, des polices, des externes, des scripts et des feuilles de style, etc.

    $(window).load(function(){
    $('#container').masonry({
        //options...
    });
});
    Je suis à l'aide d'infini défilement, il est un moyen pour l'dynamiquement ajoutés html pour être traitées par la maçonnerie après tous les médias sur le chargement de la page?
    Cela ne fonctionne pas pour le contenu dynamique. $(window).la charge se déclenche uniquement une seule fois.
    Raisons de ne pas faire ceci: metafizzy.co/blog/fenêtre-charge-dernière station de la

    OriginalL'auteur user2572094

  3. 0

    Installer 

    npm install masonry-layout --save

npm install imagesloaded --save

    Puis la vanille js options de

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

    Puis vérifiez la console pour toutes les images sont chargées.

    OriginalL'auteur Frithir.com