Fire Onload Event nach dem Laden des ersten Bildes

Question

Ich habe einen "Screenshot" einer Website, von der wir annehmen, ist bereits im Cache des Browsers.

Ich möchte, dass das Bild das erste Ding ist, das geladen wird, wenn die URL dieser Website in einem Browser geöffnet wird. Stellen Sie es sich als eine Art Preloader vor.

Das Onload-Ereignis sollte sofort danach ausgelöst werden. (= im Grunde sofort) Dies ist nur aus dem kosmetischen Grund zu stoppen den Browser zeigt die Lade-Animation für den Benutzer.

Danach sollte der Rest der Seite geladen werden. Sobald das Bild fertig ist, sollte es entfernt werden.

So in dieser Reihenfolge:

1. anzeigen vorinstalliertes Bild
2. denken der Browser die Seite vollständig
3. Last die eigentliche Website
4. verstecken geladen wird, um die preloader Bild

Gibt es eine Möglichkeit, sauber oder schmutzig, das zu tun?

Answer 1

So etwas mit dem Ereignis "on load" auf dem Bild.

<div> 
<img src="yourpreloadimage.gif" id="img" /> 
</div> 

<script> 

$("#img").on('load', function() { 
$("#img").hide(); 
    alert("image is loaded. Hide image and show rest of page."); 
}); 
</script>