Isotope Plugin: Comment utiliser l'option imagesLoaded?

Question

J'utilise le Isotope plugin pour la grille d'une page Wordpress. Je voudrais utiliser l'option imagesLoaded d'Isotope afin d'éviter que les images sur le chevauchement de page lorsque la page est chargée. Quelqu'un peut-il m'expliquer où et comment dans mon code existant je dois utiliser imagesLoaded?

jQuery(function ($) { 

    var $container = $('#isotope-list');   
    $container.isotope({       
     itemSelector : '.item', 
     layoutMode : 'masonry', 
     percentPosition: true 
    }); 


    //Add the class selected to the item that is clicked, and remove from the others 
    var $optionSets = $('#filters'), 
    $optionLinks = $optionSets.find('a'); 

    $optionLinks.click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('#filters'); 
    $optionSets.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    //When an item is clicked, sort the items. 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 

    return false; 
    }); 

}); 

MISE À JOUR:

J'ai essayé d'ajouter imagesLoaded mais il provoque le plugin Isotope d'arrêter de travailler complètement. Voici le code avec imagesLoaded ajouté:

jQuery(function ($) { 

    var $container = $('#isotope-list').imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector : '.item', 
      layoutMode : 'masonry', 
      percentPosition: true 
     }); 
    }); 

    //Add the class selected to the item that is clicked, and remove from the others 
    var $optionSets = $('#filters'), 
    $optionLinks = $optionSets.find('a'); 

    $optionLinks.click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('#filters'); 
    $optionSets.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    //When an item is clicked, sort the items. 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 

    return false; 
    }); 

}); 

Je suis un lien vers le script imagesLoaded dans l'en-tête de la page mais je reçois l'erreur suivante lors de l'inspection de la page dans Chrome:

Answer 1

vous pouvez reporter initialisant Isotope jusqu'à ce que toutes vos images ont chargé en le faisant dans la fonction de rappel, par exemple:

var $container = $('#isotope-list').imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector : '.item', 
     layoutMode : 'masonry', 
     percentPosition: true 
    }); 
}); 

Ou vous pouvez initialiser Isotope, puis déclencher la mise en page après le chargement des images.

// initialise Isotope 
var $container = $('#isotope-list');   
$container.isotope({       
    itemSelector : '.item', 
    layoutMode : 'masonry', 
    percentPosition: true 
}); 

// layout Isotope again after all images have loaded 
$container.imagesLoaded().progress(function() { 
    $container.isotope('layout'); 
}); 

Ref: https://isotope.metafizzy.co/faq.html

Answer 2

Sans un lien pour voir le reste de votre code, je fais une supposition basée sur votre erreur de journal de la console. La console montre que "imagesLoaded n'est pas une fonction" indiquant que le fichier imagesLoaded.js n'est pas chargé en tant que script ou chargé de manière incorrecte. Les premières versions d'isotope contenaient des imagesloaded mais la version actuelle ne le fait pas (v3), il faut donc le charger séparément. Assurez-vous que imagesLoaded.js et isotope.js sont chargés après jQuery.