Flexslider caricamento lento dell'immagine

Question

Sto utilizzando Flexslider su un sito Web che sto costruendo.

Mi piace molto la reattività e questo è il motivo per cui non desidero passare a nivo-slider o qualcosa di simile.

Il lato negativo è che non visualizza la prima immagine prima che vengano caricate tutte le immagini. Quindi devi aspettare che tutte le immagini nel dispositivo di scorrimento siano caricate per far apparire correttamente il sito. Questo è accettabile su un desktop/laptop ma non su un dispositivo mobile.

Ho trovato una domanda simile qui Flexslider - image preloader ma non riuscivo a farlo funzionare.

Io lo uso per attivare il codice

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

E questo nel mio 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 domanda è. Come posso fare in modo che il cursore mostri la prima immagine il più velocemente possibile? e poi il secondo e così via.

EDIT: Ho risolto il problema. È presentato nella risposta corretta qui sotto. Se hai una soluzione migliore, condividi: D

Answer 1

Ok. così ho scoperto un modo per farlo.

nel file css flexslider aggiungere questa linea

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

alla riga dopo questa riga:

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

che renderanno la prima immagine appare e attenderà per le altre immagini da caricare prima che giri.

Answer 2

Ci sono un paio di modi in cui puoi andare.

In primo luogo si potrebbe provare ad aggiungere i tag di immagine nascoste come ad esempio:

<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> 

per precaricare le immagini. Suggerirei comunque contro questo metodo.

Un'altra soluzione che mostra rapidamente i contenuti (ma non è stata testata con IE6) consiste nell'utilizzare il dispositivo di scorrimento trovato su https://github.com/ozzyogkush/jquery.contentSlider. Questo è un widget di slider che ho sviluppato e che funziona alla grande. Richiederebbe una leggera modifica al tuo layout DOM, ma puoi avere diapositive complesse di cui hai bisogno.

Answer 3

ho rapidamente risolvere questo problema con l'aggiunta di stile CSS nel foglio di stile flexslider lo stile è:

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;} 

Answer 4

So che questo è un vecchio problema, ma ho una soluzione più semplice.

Trova

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

e cambiare il selettore a

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

Answer 5

smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode 

se si imposta smoothHeight come vera prova in modalità predefinita allora può migliorare le prestazioni anche

Answer 6

ho trovato modo più semplice per farlo.

Aggiungere un div con la prima immagine del cursore prima del contenitore flexslider come questo.

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

Quindi aggiungere seguente codice flexslider inizializzazione del: