camelia-studio/ICO
camelia-studio/ICO
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 15 Wiki Activity

correction du chargement des images

Browse Source 
mansory et loading lazy ne se marchent plus dessus (normalement)
This commit is contained in:
Esenjin 2024-12-30 21:18:25 +01:00
parent 90105fa7a1
commit 6cbc876cc2
2 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
galeries.php
View File

@ -66,15 +66,38 @@ if (!isSecurePath($parentPath)) {
</div> </div>
<div class="gallery-grid" id="gallery-grid"> <div class="gallery-grid" id="gallery-grid">
<?php foreach($images as $image): ?> <?php foreach($images as $image): ?>
<div class="gallery-item"> <div class="gallery-item">
<a href="partage.php?image=<?php echo urlencode($image); ?>"> <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); ?>"
</a> alt="Image de la galerie"
</div> loading="lazy"
<?php endforeach; ?> onload="this.parentElement.parentElement.style.opacity = '1'">
</div> </a>
</div>
<?php endforeach; ?>
</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/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script> <script>

5
styles.css
View File

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