Galerie Bootstrap petit bug

Galerie Bootstrap petit bug - HTML/CSS - Programmation

Marsh Posté le 08-11-2023 à 18:49:29    

Bonjour à tous ! :)
 
Petit souci avec une galerie photo bootstrap qui marche correctement sauf pour le premier chargement de celle-ci ou des photos se superpose.
Puis on refresh la page et c'est réglé mais si on vide les caches rebelote.
 
J'ai l'impression que c'est un problème de position:relative mais je peux me tromper.
 
CSS :

Code :
  1. .grid-item .post_thumb img{
  2. width:100%;
  3. height:auto;
  4. -webkit-transition:all 0.5s ease-in-out;
  5. -moz-transition:all 0.5s ease-in-out;
  6. -ms-transition:all 0.5s ease-in-out;
  7. transition:all 0.5s ease-in-out;
  8. float:left;
  9. }
  10. .grid-item .post_thumb{
  11. overflow:hidden;
  12. position:relative;
  13. margin:0 0 25px;
  14. }
  15. .grid-item:hover .post_thumb img{
  16. -webkit-transform:scale(1.1);
  17. -moz-transform:scale(1.1);
  18. -ms-transform:scale(1.1);
  19. transform:scale(1.1);
  20. }
  21. .grid-item:hover .gallery-overlay{
  22. opacity:1;
  23. visibility:visible;
  24. -webkit-transform:scale(1);
  25. -moz-transform:scale(1);
  26. -ms-transform:scale(1);
  27. transform:scale(1);
  28. }


 
HTML :

Code :
  1. <!-- Gallery Section -->
  2. <section id="gallery">
  3.  <div class="container">
  4.   <div class="row">
  5.    <div class="col-xs-12">
  6.     <div class="row grid">
  7.      <div class="col-xs-6 col-sm-4 col-md-3 grid-item">
  8.       <div class="post_thumb">
  9.        <img src="img/gallery/1.jpg" alt="">
  10.        <div class="gallery-overlay">
  11.         <a href="img/gallery/1.jpg" class="fancybox" title="Gallery Image 1"><i class="fa fa-camera"></i></a>
  12.        </div>
  13.       </div>
  14.      </div>
  15.      <div class="col-xs-6 col-sm-4 col-md-3 grid-item">
  16.       <div class="post_thumb">
  17.        <img src="img/gallery/2.jpg" alt="">
  18.        <div class="gallery-overlay">
  19.         <a href="img/gallery/2.jpg" class="fancybox" title="Gallery Image 2"><i class="fa fa-camera"></i></a>
  20.        </div>
  21.       </div>
  22.      </div>
  23.      <div class="col-xs-6 col-sm-4 col-md-3 grid-item">
  24.       <div class="post_thumb">
  25.        <img src="img/gallery/13.jpg" alt="">
  26.        <div class="gallery-overlay">
  27.         <a href="img/gallery/13.jpg" class="fancybox" title="Gallery Image 3"><i class="fa fa-camera"></i></a>
  28.        </div>
  29.       </div>
  30.      </div>
  31.      <div class="col-xs-6 col-sm-4 col-md-3 grid-item">
  32.       <div class="post_thumb">
  33.        <img src="img/gallery/4.jpg" alt="">
  34.        <div class="gallery-overlay">
  35.         <a href="img/gallery/4.jpg" class="fancybox" title="Gallery Image 4"><i class="fa fa-camera"></i></a>
  36.        </div>
  37.       </div>
  38.      </div>
  39.     </div>
  40.    </div>
  41.   </div>
  42.  </div>
  43. </section>
  44. <!-- End Gallery Section -->



---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
Reply

Marsh Posté le 08-11-2023 à 18:49:29   

Reply

Marsh Posté le 08-11-2023 à 20:28:20    

Le lien de la page en question si ca peu aider.
 
https://www.ozonefrance.fr/galerie-ozone-spa-marin.php


---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
Reply

Marsh Posté le 09-11-2023 à 08:11:51    

Sur quel navigateur, car sur mon Firefox je n'ai pas le probleme.
Peut être essayer de mettre un min-width sur l'image en css ou de remplir les balises width et height de l'image.


---------------
D3
Reply

Marsh Posté le 09-11-2023 à 14:56:04    

Effectivement ca bug pas sur Firefox mais sur tous les autres.
Chrome, Opera, Edge...


Message édité par Izno69 le 09-11-2023 à 14:56:44

---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
Reply

Marsh Posté le 10-11-2023 à 18:44:14    

la page fait 18 MO, ce qui est une abérration, tes images étant donné qu'elles sont petites devraient être de petite taille.  
Donc je te conseille avant tout chose, de générer des miniatures de ces images avec un taux de compression JPEG de 70% ça sera largement suffisant, et même les images fullsize tu peux les compresser et les faire tenir dans 100ko au lieu de 500ko.
 
Ensuite comme disait l'ami mechkurt, ton pb se produit parce que tes images se chargent et que ton composant n'a pas la hauteur finale de tes images.


---------------
Blablaté par Harko
Reply

Marsh Posté le 11-11-2023 à 02:27:29    

Comment tu fais pour connaitre le poids de la page ?
 
Ok je vais réduire les miniatures et faire des webp pour les grands format.


Message édité par Izno69 le 11-11-2023 à 02:31:57

---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
Reply

Marsh Posté le 11-11-2023 à 07:46:51    

l'ispecteur de code de chrome, tu as le poids total du bordel téléchargé (bon c'est à la louche qu'il affiche) mais 18 mo, c'est chaud quoi.
 
Le dernier site que j'ai fait j'ai optimisé à fond malgré les images et tout le reste et la page ne dépassait pas 1.7Mo au chargement et 2.4Mo au scroll.
 
J'ai tout fait à la main que ce soit les JS, animations et tout le reste, mais malgré cela il me reste encore 150ko de JS et 100ko de CSS.  
 
Je vais essayer à l'avenir de faire des packages et les charger en fonction des modules qui ont besoin de JS
 
Et pour les images j'ai fait un script en nodeJS qui utilise sharp, et qui va me convertir toutes les images en webp/avif et j'ai utilisé picture dans le site :  
 

Code :
  1. <picture>
  2.       <source type="image/avif" media="(max-width:649px)" srcset="/assets/img/image-logo.png_low.avif">
  3.       <source type="image/avif" srcset="/assets/img/image-logo.png.avif">
  4.       <source type="image/webp" media="(max-width:649px)" srcset="/assets/img/image-logo.png_low.webp">
  5.       <source type="image/webp" srcset="/assets/img/image-logo.png.webp">
  6.       <img src="/assets/img/image-logo.png" loading="lazy">
  7. </picture>


 
Picture n'est que du sucre, et au niveau style c'est img qui travaille au niveau du style.
Apres si tu utilise du JS pour bricoler, il faudra voir.
 
Enfin bref c'est tout un tas d'optimisations qui manque sur ta page.


---------------
Blablaté par Harko
Reply

Marsh Posté le 11-11-2023 à 07:47:59    

Et vire ce loader au chargement du site, ce n'est pas une application c'est un site qui se charge.

 

Si je suis en 3G ou 4G low, je dois me taper un loader pendant 1minute en attendant que le reste du site charge...


Message édité par gatsu35 le 11-11-2023 à 07:48:32

---------------
Blablaté par Harko
Reply

Marsh Posté le 11-11-2023 à 18:09:45    

Merci pour ton temps et tes conseils en tout cas


---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed