JavaScript Preload Bilder

Question

Ich versuche, Bilder zu vorzuladen, der folgende Code funktioniert:

$(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"; 
    }); 
}); 

Aber die Frage Ich mag würde, lösen ist, dass Chrome das Spinnen „Laden“ -Symbol in der Registerkarte zeigt. Gibt es eine Möglichkeit, dies zu tun, so dass es sich nicht kontinuierlich dreht, bis die Bilder geladen sind? Ich möchte, dass die Seite und die Vorschaubilder geladen werden und beginnen dann, die größeren Bilder im Hintergrund zu laden, ohne das sich drehende Symbol in der Registerkarte.

Answer 1

Ajax Teil bighostkim Antwort Verwenden und das load() Ereignis, bekam ich, was ich wollte

um die gewünschten Ergebnisse zu erzielen, die jede Schleife benötigte innerhalb der load() Veranstaltung. Wenn Sie das Ereignis auf das Ereignis ready() setzen, werden die Bilder vor den Seitenbildern geladen, wodurch die Seitenbilder in der Warteschlange hängen bleiben und nach den vorinstallierten Bildern geladen werden. Die meisten Browser erlauben nur das gleichzeitige Laden einiger Elemente vom selben Host, die anderen müssen warten, bis sich ein Spot öffnet (es sei denn, er ist von einem anderen Host).

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

Etwas gemacht und 10 Bilder hinzugefügt. Sie laden ohne jede Hektik. Ich habe es gerade in meinem Internet versucht, das ist langsam Schildkröte.

Ich denke Browser wartet, bis alle Bilder Ihrer Funktion abgeschlossen ist, wie Sie $(document).ready(function() { }); haben.

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

Haben meine Gedanken noch nicht getestet.

Ich denke, Sie laden Bilddateien synchron, wenn das Dokument bereit ist, also teilt Chrome dem Benutzer mit, dass das Laden nicht erfolgt.

Nicht das Spinnen Bild zu zeigen, sollten Sie Ajax-Aufruf an den Server verwenden, um Bilder zu empfangen und Sie können es zu Dokument hinzufügen oder nichts tun (da es bereits zwischengespeichert)

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