image-preloader preload images - Il modo migliore per precaricare le immagini usando JavaScript / jQuery?





4 Answers

sprite

Come altri hanno già accennato, lo sprite funziona abbastanza bene per una serie di motivi, tuttavia, non è buono come è stato dimostrato.

  • Sul lato positivo, si finisce per fare solo una richiesta HTTP per le tue immagini. YMMV però.
  • Sul lato negativo si sta caricando tutto in una richiesta HTTP. Poiché la maggior parte dei browser correnti è limitata a 2 connessioni simultanee, la richiesta di immagine può bloccare altre richieste. Quindi YMMV e qualcosa come lo sfondo del tuo menu potrebbe non essere visualizzato per un po '.
  • Più immagini condividono la stessa tavolozza di colori, quindi c'è un po 'di risparmio, ma questo non è sempre il caso e anche così è trascurabile.
  • La compressione è migliorata perché vi sono più dati condivisi tra le immagini.

Trattare con forme irregolari è però complicato. Unire tutte le nuove immagini a quelle nuove è un altro fastidio.

Approccio low-jack usando i tag <img>

Se stai cercando la soluzione più definitiva , dovresti seguire l'approccio low-jack che preferisco ancora. Crea collegamenti <img> alle immagini alla fine del documento e imposta width e height a 1x1 pixel e aggiungili in un div nascosto. Se sono alla fine della pagina, saranno caricati dopo altri contenuti.

onload hover

Sono pienamente consapevole che questa domanda è stata posta e ha risposto ovunque, sia su SO che fuori. Tuttavia, ogni volta sembra che ci sia una risposta diversa, per esempio this , this e that .

Non mi interessa se usi jQuery o no - l'importante è che funzioni, ed è cross-browser.]

Quindi, qual è il modo migliore per precaricare le immagini?




A mio parere, l'utilizzo di Multipart XMLHttpRequest introdotto da alcune librerie sarà una soluzione preferita negli anni successivi. Tuttavia IE <v8, ancora non supporta i dati: uri (anche IE8 ha un supporto limitato, consentendo fino a 32kb). Ecco un'implementazione del preloading dell'immagine parallela: http://code.google.com/p/core-framework/wiki/ImagePreloading , è impacchettato in un framework ma vale comunque la pena dare un'occhiata.




Ecco la mia soluzione semplice con una dissolvenza nell'immagine dopo che è stata caricata.

    function preloadImage(_imgUrl, _container){
        var image = new Image();
            image.src = _imgUrl;
            image.onload = function(){
                $(_container).fadeTo(500, 1);
            };
        }






Related