Charge d'image lente de Flexslider
J'utilise Flexslider sur un site que je suis en train de construire.
j'aime beaucoup la réactivité et c'est la raison pour laquelle je ne veux pas passer à nivo-slider ou quelque chose de similaire.
le négatif est qu'il n'affiche pas la première image avant que toutes les images soient chargées. Donc, vous devez attendre à toutes les images dans le curseur est chargé pour faire le site Regarder correctement. Cela est acceptable sur un ordinateur de bureau/portable, mais pas sur un appareil mobile.
j'ai trouvé une question similaire ici Flexslider - image preloader mais je ne pouvais pas le 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 faire pour que le curseur affiche la première image aussi vite que possible? et puis le deuxième et ainsi de suite.
EDIT: j'ai résolu le problème. Il est présenté dans la bonne réponse ci-dessous. Si vous avez une meilleure solution: s'il vous plaît partager: d
6 réponses
Ok. j'ai donc trouvé un moyen de le faire.
dans le fichier CSS de flexslider ajouter cette ligne
.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;}
à la ligne qui suit cette ligne:
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
qui fera apparaître la première image et attendra que les autres images se chargent avant qu'elle ne tourne.
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 remplacer le sélecteur par
.flexslider .slides > li:not(:first-child)
j'ai rapidement corriger cette question en ajoutant le style css dans la feuille de style flexslider le style est:
.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}
j'ai trouvé la façon la plus douce de le faire.
Ajouter un div avec la première image de slider 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>
puis ajouter 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();
}
});
});
smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
si vous définissez smoothHeight comme true try en mode par défaut, il peut améliorer les performances aussi
il y a plusieurs façons d'y aller.
D'abord, vous pouvez essayer d'ajouter des tags d'image cachés tels que:
<img src="pictures/slide1.jpg" style="display:none">
<img src="pictures/slide2.jpg" style="display:none">
<img src="pictures/slide3.jpg" style="display:none">
<img src="pictures/slide4.jpg" style="display:none">
<ul>...your slides...</ul>
pour précharger vos images. Je déconseille cette méthode.
une autre solution qui montrera votre contenu rapidement (mais n'a pas été testé avec IE6) est d'utiliser le curseur trouvé à https://github.com/ozzyogkush/jquery.contentSlider . C'est un widget slider J'ai développé ce qui fonctionne très bien. Cela nécessiterait un léger changement à votre disposition DOM, mais vous pouvez avoir des diapos aussi complexes que vous avez besoin.