jquery maçonnerie brise (empile des images) en chrome / safari mais seulement en première charge

Il semble que, lorsque j'essaie de charger la page, toutes les images sont empilés sur le dessus de l'un à l'autre. Mais si vous cliquez sur un lien qui vous emmène à la même page (comme le lien vers l'accueil), puis la maçonnerie des coups de pied dans. Donc, je pense que la maçonnerie est en cours de chargement trop tôt, comme avant jquery prépare la page ou quelque chose.

Ici mon jquery appel:

$(document).ready(function(){
    $('#image_roll_container').masonry({
        itemSelector: '.box'
    });

....

Voici la page en question:

http://ratattoos.com/

il fonctionne très bien sous firefox et IE8.

source d'informationauteur rugbert | 2011-09-19

  1. 18

    J'ai réussi à résoudre ce problème avec la suite de tweak:

    <script type="text/javascript">
    $(document).ready(function(){
        $('img').load(function(){
            $(".content_photo").masonry();
        });
        $(".content_photo").masonry();
    });
</script>
  2. 11

    dirait que j'ai besoin d'un plugin appelé imagesLoaded pour la Monsry script fonctionne correctement avec les goûts de google chrome et safari

  3. 8

    Essayé tout ce qui est suggéré dans ce fil de discussion, rien n'a fonctionné, puis trouvé ceci:

    $(window).load(function(){   $('#content').masonry(); });

    Fonctionne très bien maintenant, trouvé ici:
    https://github.com/desandro/masonry/issues/35

    Post Original de l'auteur:
    https://github.com/desandro

  4. 4

    Vous avez raison à propos de la imagesLoaded. Il a été fonctionne correctement dans Firefox, mais empilement dans Chrome/Safari.

    Voici le lien http://masonry.desandro.com/demos/images.html

    Code:

    var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box'
  });
});
  5. 1

    Je suis récemment tombé sur cette question. Pour le fixer, j'ai eu recours à l'img attributs width et height. Le problème s'est résolu de lui-même.

  6. 0

    Une autre façon, si vous savez l'image des hauteurs, est à définir dans le CSS avant de vous charger de la Maçonnerie, puis la mise en page est plus rapide que d'attendre pour les images. Cette méthode fonctionne si, par exemple, toutes vos images sont de la même taille. Ensuite, votre site se charge rapidement sur les connexions lentes, comme le téléphone mobile.

    J'ai posté un peu de script pour la méthode alternative ici:

    http://instancia.net/loading-jquery-masonry-on-mobile/

    Si vous utilisez ce script, modifier les numéros pour correspondre à la vôtre.

  7. 0

    Sur Firefox et sur mon iPad 2 en maçonnerie fonctionnait bien, mais dans chrome et safari sur OS X, les éléments qui se chevauchent/empilage au chargement de la page et jusqu'à ce qu'une fenêtre de redimensionnement de même se produire. Après avoir creusé dans le code de jquery.masonry.js j'ai trouvé que je peux déclencher un resize() juste après la création de la maçonnerie, de sorte que tous les éléments de réorganiser correctement. Maintenant tout fonctionne bien. 

    jQuery(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
    itemsSelector: '.thumbnail',
    isFitWidth: true
    }).resize();
}); 
})

    toutes les autres solutions: (fenêtre).de charge, réglage de la largeur & hauteur en CSS et sur img attributs, etc, ça n'a pas fonctionné pour moi.

  8. 0

    Il a besoin de hauteurs dans ces navigateurs pour afficher correctement comme Jennifer dit. I utilisation de php getimagesize() pour obtenir la hauteur et la largeur des images. Fonctionne parfaitement maintenant.

  9. 0
    <script>
        var container = document.querySelector('#masonry');
        var msnry = new Masonry( container, {
            itemSelector: '.item',
            "columnWidth": 200,
        });
        $('.item img').load(function(){
                var msnry = new Masonry( container, {
                itemSelector: '.item',
                "columnWidth": 200,
            });
        })
</script>
  10. 0

    La "charge" de l'événement se déclenche pour chaque image dans le DOM, c'est exagéré. Vous avez besoin de mettre à jour la mise en page de la maçonnerie lors de la dernière image dans le DOM. Voici le code:

    $(document).ready(function(){
    //init the masonry on document ready event;
    //at this point the images are not loaded so the layout will break UNLESS you set up the correct values for the "width" and "height" attributes of the img tags
    $('.content_photo').masonry();

    //to make sure the layout will not break apart we update the masonry layout just after the last image from the DOM was loaded
    var total_images = $('img').length;
    var counter = 1;
    $('img').load(function() {
        if(counter == total_images) {
            alert('the last image in the DOM was loaded. now we can update the masonry layout');
            $('.content_photo').masonry('layout');
        }
        counter++;
    });
});
  11. 0

    J'ai eu le problème inverse, comme décrit: la première charge a bien fonctionné dans Mac OS X Safari, mais le changement de la grille avec tous les nouveaux éléments causé tous pour pile dans le coin supérieur gauche. En outre, en attente pour le prêt de l'événement et de réglage CSS hauteur & largeur sur nos éléments n'ont pas le fixer.

    Sur notre site, nous avons les catégories de données qui s'affichent dans la maçonnerie de la grille, et une seule catégorie montre à la fois. Un utilisateur pourrait passer de la catégorie, à tout moment, et de déclencher une requête AJAX pour charger les nouvelles données. Dans le dernier Safari (9.1, 10) et les navigateurs comme google Chrome, nous pourrions simplement le faire lors de la modification de la catégorie de swap dans tous les nouveaux éléments:

        //domData is HTML string from the server
    //IMJS is our global variable that we use for globals and lookups
    $("#divTemplateCategoryName").after(domData); //insert new HTML
    var elementsToAdd = $(".grid-item-template-info"); //select the elements
    IMJS.MasonryGrid.masonry('addItems', elementsToAdd); //tell masonry to add them
    IMJS.MasonryGrid.masonry('layout'); //tell masonry to layout again

    Cependant, dans certaines versions de Safari qui ne fonctionne pas, et nous avons dû faire ceci à la place:

        //domData is HTML string from the server
    //IMJS is our global variable that we use for globals and lookups
    IMJS.MasonryGrid.masonry('destroy'); //destroy the grid
    $("#divTemplateCategoryName").after(domData); //insert new HTML
    InitMasonry(); //re-do our entire masonry init

    Parce que je n'ai pas le temps pour traquer chaque version de navigateur qui pourraient être affectés par ce bug, je suis passé à la dernière méthode pour tous les navigateurs.