JavaScript Precarica immagini

Question

sto cercando di precaricare le immagini, il seguente codice funziona:

$(document).ready(function(){ 
    $(".member-photos img").each(function(){ 
     var id = $(this).attr("data-id"); 
     var file = $(this).attr("data-file"); 
     var img = new Image(); 
     img.src = "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false"; 
    }); 
}); 

Ma il problema vorrei risolvere, è che Chrome visualizza l'icona spinning "Loading" nella scheda. C'è un modo per farlo in modo che non giri continuamente fino a quando le immagini non sono state caricate? Vorrei per la pagina e miniature per caricare poi iniziare a caricare le immagini più grandi in background senza l'icona di filatura nella scheda.

Answer 1

Utilizzando parte ajax della risposta di bighostkim e l'evento load(), ho ottenuto quello che volevo

Per ottenere i risultati desiderati, ogni ciclo doveva essere all'interno dell'evento load(). Inserendolo nell'evento ready(), le immagini iniziano a caricarsi prima delle immagini della pagina, facendo in modo che le immagini della pagina vengano sospese nella coda e caricate dopo le immagini precaricate. La maggior parte dei browser consente di caricare solo alcuni elementi dallo stesso host contemporaneamente, gli altri devono attendere fino all'apertura di uno spot (a meno che non provenga da un host diverso).

$(window).load(function(){ 
    $(".member-photos img").each(function(){ 
     var id = $(this).attr("data-id"); 
     var file = $(this).attr("data-file"); 
     $.ajax({ url : "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false", cache: true, processData : false }); 
    }); 
}); 

Answer 2

qualcosa fatto e nuove immagini aggiunti 10 immagini. Caricano senza trambusto. L'ho appena provato su internet che è una tartaruga lenta.

Penso browser aspetta fino a quando tutte le immagini della vostra funzione è completato come si deve $(document).ready(function() { });.

Fiddle

var i = 1; 
$(document).ready(function(){ 
    $(window).stop(); 
    $("img").hide(); 
    $("img").each(function(){ 
     var source = $(this).attr("src"); 
     var img = new Image(); 
     img.className = i; 
     img.src = source; 
     $('body').append(img); 
     $("."+i).hide().fadeIn(); 
     i++; 
    }); 
}); 

Answer 3

non hanno ancora testato i miei pensieri.

Penso che si sta caricando i file di immagine in modo sincrono quando il documento è pronto, quindi Chrome dice all'utente che il carico non viene fatto.

di non mostrare l'immagine di filatura, è necessario utilizzare chiamata AJAX al server per ricevere le immagini e si può aggiungere al documento o non fare nulla (dal momento che è già nella cache)

$.ajax({ url : <<image_url>>, cache: true, processData : false, }) 
.success(function(){ 
    $(document).append($("<img/>").attr("src", <<image_url>>).hide()); 
});