Bild für alle Bilder vorladen

Question

Ich versuche, ein Vorladungsbild für alle Bilder mit der Methode jQuery load() hinzuzufügen. In meinem php-Dokument lese ich den Image-Ordner und erstelle ein img-tag foreach Element.

Etwas wie folgt aus:

$myimages = opendir("img/"); 
$gallery = array(); 
while($myimage = readdir($myimages)) 
{ 
if($myimage != '.' AND $myimage != '..') 
{ 
    $gallery[] = $image; 
} 
} 

sort($gallery); 

foreach ($gallery as $image) { 
    echo '<div><img src="img/'.$image.'" id="preload"/></div>'; 
} 

closedir($myimages); 

Jetzt will ich bis die Bilder geladen sind ein „Spinner-Bild“ anzuzeigen. Jeder Versuch mit der window.load oder jQuery load funktioniert nicht für mich.

Kann mir jemand erklären, was ich zu tun habe?

Danke für Ihre Hilfe!

// edit //

Wenn ich ein zusätzliches div in html es gut funktioniert.

Answer 1

Sie konnte preloadImages mit Javascript

function preloadImages(array) { 
if (!preloadImages.list) { 
    preloadImages.list = []; 
} 
var list = preloadImages.list; 
for (var i = 0; i < array.length; i++) { 
    var img = new Image(); 
    img.onload = function() { 
     var index = list.indexOf(this); 
     if (index !== -1) { 
      // remove image from the array once it's loaded 
      // for memory consumption reasons 
      list.splice(index, 1); 
     } 
    }; 
    list.push(img); 
    img.src = array[i]; 
} 

}