Isotope & Safari : images qui se superposent

A la date d’écriture de cet article, il semble que la bibliothèque Javascript Isotope (qui permet d’afficher des contenus sous forme de mosaïque dynamique) dysfonctionne sous Safari.

En effet, le calcul des hauteurs de chaque élement se fait trop tôt (avant le chargement complet des images) et on assiste donc à une superposition de celles-ci.

Le problème est cependant solvable en utilisant l’extension jQuery Images Loaded, qui va nous permettre de relancer le calcul des hauteurs respectives de chaque élément à la fin du chargement de toutes les images (source).

Il faudra cependant rajouter une ligne dans le HTML pour charger cette nouvelle extension :

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

(vous pouvez également héberger en local le même fichier Javascript)

Isotope s’appelle en général de la manière suivante :

$( function() {
  var $container = $('#my-container-id');
  $container.isotope({
    // options...
  })
});

On va modifier ce code pour forcer le recalcul évoqué plus haut :

$( function() {
  var $container = $('#my-container-id');
  $container.isotope({
    // options...
  }).imagesLoaded( function() {
    $container.isotope('layout');
  });
});

Le traitement supplémentaire effectué sera quasi imperceptible.