Come precaricare le immagini utilizzate solo al passaggio del mouse?

14

Ho un collegamento che inizia con un'immagine di sfondo e poi passa al passaggio del mouse su un'altra. Entrambe le immagini di sfondo sono impostate nel CSS. I miei browser (nessuno di questi) non sembrano caricare l'immagine al passaggio del mouse fino a quando non si passa effettivamente al passaggio del mouse. Ma poi finisci con un'immagine vuota per alcuni secondi (sulla mia connessione molto lenta) ci vuole per caricare quella nuova. Esiste un modo per incoraggiare il browser a precaricare l'immagine al passaggio del mouse in modo che il tempo di ritardo non si verifichi al passaggio del mouse?

css images load-time

— Daniel Bingham
fonte

17

1) Usa CSS Sprites (Questo è il metodo preferito).

2) Carica le immagini in un div nascosto. Posiziona le immagini nel div e quindi imposta il CSS del div display: none;per nasconderlo.

3) Carica le immagini con CSS :

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) Usa questo JavaScript

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>

— John Conde
fonte

C'è un modo per caricarli dopo che la pagina è stata caricata? Quindi l'utente non vede un cerchio di caricamento sul cursore? Un modo sarebbe avere un frame nascosto che utilizza javascript per ritardare la visualizzazione del frame nascosto, come nella mia domanda stackoverflow.com/questions/13437091/… ma esiste un metodo preferito per ritardare e non mostrare il cerchio di caricamento su quel cursore ?

— Reseagainst

Non importa, ho trovato questo perishablepress.com/3-ways-preload-images-css-javascript-ajax e funziona perfettamente con il ritardo.

— Risorto il

10

Non mi piace molto la soluzione javascript: è disordinata, difficile da mantenere e ovviamente fallisce completamente quando JS è disabilitato.

La soluzione moderna è usare CSS Sprites - provalo, credimi, ti chiederai perché non l'hai mai fatto prima;)

— DMP
fonte

0

Ho trovato questo link su come precaricare le immagini usando CSS puro:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

E ha funzionato per me quando ho bisogno di cambiare le diverse immagini di sfondo al passaggio del mouse.

— Sheena Katrina
fonte

0

Aggiungi questo sopra il tuo CSS:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

Se segui la rotta sprite come suggerisce danp, hai ancora problemi con il caricamento dello sprite prima che sia necessario. Detto questo, adoro gli sprite; per renderli facilmente uso lo strumento Spriteme di Steve Souders:

— Nisse Engström
fonte