Precaching delle risorse di immagine HTML

Question

Precaching delle risorse di immagine HTML

#1 da (2 voti)

4

Ho scritto un visualizzatore web cam dove sorgente javascript fondamentalmente genera l'immagine in base a una classe "attiva" in un elenco.

Mi chiedevo quali sono le buone tecniche moderne per caricare le immagini più velocemente in background, in modo che un utente possa ottenere un'esperienza migliore sfogliando le immagini.

Ovviamente non ha senso scaricare tutte le immagini, immagino che debba essere come quando si scorre una mappa di Google in linea di principio, le immagini vengono caricate su richiesta.

javascript

posta hendry 11.01.2012 - 17:37

fonte

1 risposta

Leggi altre domande sui tag javascript

Tecnica per più utenti sullo stesso set di dati Come organizzare il processo di revisione del codice

score 2 · Accepted Answer

Non ho ancora esaminato questa tecnica specifica prima, ma è così che mi avvicinerei:

$(function() {
    var src = [
        "https://developer.mozilla.org/skins/mdn/Transitional/img/mdn-logo-sm.png",
        "http://cdn.sstatic.net/programmers/img/logo.png?v=123",
        "http://livedocs.adobe.com/flex/3/html/images/adobe.png"
    ];
    var loaded = [];
    var idx = 0;

    var sz = src.length;
    for(var n = 0; n < sz; ++n) {
        var img = new Image();
        img.onload = function() {
            loaded.push(this);
            if(sz === loaded.length) onLoaded();
        };
        img.src = src[n];
    }

    function onLoaded() {
        $("#next").removeClass("disabled").addClass("enabled");
    }

    $("#next").click(function(e) {
        if(!$(this).hasClass("disabled")) {
            e.preventDefault();
            idx = (idx + 1) % sz;

            $($("img")[0]).remove();
            $("#container").append(loaded[idx]);
        }
    });
});

link

Nel mio esempio di violino, costringo solo il client a caricare la prima immagine con il resto della pagina. Quindi, su carico jQuery ( $(function() {}) ), memorizzo nella cache tutte le altre immagini che voglio visualizzare con lo script (3 immagini in questo caso).

Una volta caricata ogni immagine, la sposto in una matrice memorizzata nella cache e controlla se la dimensione della cache è uguale alla dimensione della sorgente. Se lo fa, allora chiamo onLoaded .

Una ottimizzazione potrebbe essere semplicemente utilizzare la cache dell'immagine nella pagina piuttosto che caricarne un'altra (0 ° elemento in src ).

Naturalmente, questo può essere fatto facilmente anche con Javascript nativo, ho scelto di usare jQuery per questo esempio senza una buona ragione reale ;)