web-dev-qa-db-fra.com

Chargement lent des images Flexslider

J'utilise Flexslider sur un site Web que je construis. 

J'aime beaucoup la réactivité et c’est la raison pour laquelle je ne veux pas changer de nivo-slider ou quelque chose de similaire.

Le point négatif à ce sujet est qu’elle n’affiche pas la première image avant que toutes les images ne soient chargées. Il faut donc attendre que toutes les images du curseur soient chargées pour que le site ait une apparence correcte. Ceci est acceptable sur un ordinateur de bureau/portable, mais pas sur un appareil mobile.

J'ai trouvé une question similaire ici Flexslider - préchargeur d'image mais je n'ai pas réussi à la faire fonctionner.

J'utilise ceci pour déclencher le code

$(window).load(function() {
        $('.flexslider').flexslider();
    });

Et ceci dans mon HTML

                <ul class="slides">             
                <li>
                    <img src="pictures/slide1.jpg" alt=" ">
                <li>
                    <img src="pictures/slide2.jpg" alt=" ">                         
                </li>
                <li>
                    <img src="pictures/slide3.jpg" alt=" ">
                </li>
                <li>
                    <img src="pictures/slide4.jpg" alt=" ">
                </li>
            </ul>

La question est. Comment puis-je faire en sorte que le curseur affiche la première image aussi rapidement que possible? et puis le second et ainsi de suite.

EDIT: J'ai résolu le problème. Il est présenté dans la réponse correcte ci-dessous. Si vous avez une meilleure solution: partagez s'il vous plaît: D

jqueryhtmlpreloadflexslider
22
Alfred Larsson

D'accord. alors j'ai trouvé un moyen de le faire.

dans le fichier css flexslider, ajoutez cette ligne

.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;}

à la ligne après cette ligne:

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

Cela fera apparaître la première image et attendra que les autres images se chargent avant de tourner.

54
Alfred Larsson

Je sais que c'est un vieux problème, mais j'ai une solution plus simple. 

Trouver

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

et changez le sélecteur en

.flexslider .slides > li:not(:first-child)
5
Liam Potter

J'ai trouvé le moyen le plus simple de le faire.

Ajouter une div avec la première image du curseur avant le conteneur flexslider comme ceci.

<div class="pre-flexslider-container">
     <img src="slider.jpg">
</div>
<div class="main-flexslider-container" style="display: none">
    <div class="flexslider">
    .
    .
    .
    </div>
</div>

Ajoutez ensuite le code suivant à l’initalisation de flexslider:

$(window).load(function(){
  $('.flexslider').flexslider({
    .
    .
    .
    .
    .
    start: function(slider){
        $('.pre-flexslider-container').css("display","none");
        $('.main-flexslider-container').css("display","block");
        slider.resize();
    }
  });
});
1
Uğur Taşdildiren

J'ai rapidement résolu ce problème en ajoutant un style CSS dans la feuille de style flexslider. Le style est le suivant:

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}
1
Gurwinder Singh
smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

si vous définissez smoothHeight comme vrai, essayez en mode par défaut, il peut également améliorer les performances.

0
Mehmet Eren Yener