correction du chargement des images

mansory et loading lazy ne se marchent plus dessus (normalement)

galeries.php

@@ -69,12 +69,35 @@ if (!isSecurePath($parentPath)) {
     <?php foreach($images as $image): ?>
     <div class="gallery-item">
         <a href="partage.php?image=<?php echo urlencode($image); ?>">
-               <img src="<?php echo htmlspecialchars($image); ?>" alt="Image de la galerie" loading="lazy">
+            <img src="<?php echo htmlspecialchars($image); ?>" 
+                 alt="Image de la galerie" 
+                 loading="lazy"
+                 onload="this.parentElement.parentElement.style.opacity = '1'">
         </a>
     </div>
     <?php endforeach; ?>
-   </div>
+</div>
 
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const grid = document.querySelector('#gallery-grid');
+    
+    // Initialiser Masonry immédiatement sans attendre le chargement des images
+    const masonry = new Masonry(grid, {
+        itemSelector: '.gallery-item',
+        columnWidth: '.gallery-item',
+        gutter: 20,
+        fitWidth: true
+    });
+    
+    // Réorganiser la grille quand une image est chargée
+    grid.addEventListener('load', function(e) {
+        if (e.target.tagName === 'IMG') {
+            masonry.layout();
+        }
+    }, true);
+});
+</script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
    <script>

styles.css

@@ -216,10 +216,6 @@ p {
     margin: 0 auto;
 }
 
-.gallery-grid.is-loading .gallery-item {
-    opacity: 0;
-}
-
 .gallery-grid .gallery-item {
     opacity: 1;
     transition: opacity 0.3s ease;
@@ -232,6 +228,7 @@ p {
     border-radius: 8px;
     overflow: hidden;
     background-color: #1e1e1e;
+    opacity: 0;
     transition: transform 0.3s ease;
 }