Bild nachladen mit preloader

[ALF]

Hallo,

meine usprüngliche Mission, ein Bild "onclick" nachzuladen funktioniert zunächst einwandfrei.

------------------------
|FUNKTIONSWEISE

Hierfür konstruiere ich eine Funktion "loadImage", in der ich festlege, dass ein Element mit einer entsprechenden id aufgerufen werden soll; passiert dies erfolgreich, dann ist diesem Element "source" zu attribueren, und natürlich soll das Element auch als Block-Element angezeigt werden (alle "img" werden zuvor per CSS via "display:none" ausgeblendet).

Nun rufe ich einfach eine Funktion "loadImage" auf, die eben "onclick"
 das Bild "Flowers.jpg" in das Bild mit der ID "pic01" lädt.

Im Detail sieht das so aus:

<script type="text/javascript">  
function loadImage(source, id) {  
	var element = document.getElementById(id);  
	if (element) {  
		element.src=source;  
		element.style.display = 'block';  
	}  
}  
</script>

bzw. im Fließtext:

<a href="#1" onclick="loadImage('Flowers.jpg','pic01'), this.style.display='none';">Bild laden</a>  
<img id="pic01" src="#1" alt=""/>

"Lade Bild" muss klarerweise "onclick" ausgeblendet werden.
Prinzipiell simplester Code, nicht gerade Astrophysik.
                                                        |
--------------------------------------------------------

Leider dauert die Ladezeit des Bildes (welches [unglücklicherweise] sehr hochauflösend weil detailreich sein MUSS) speziell bei schlechtem Empfang auf Mobiltelefonen ein paar Sekunden, sodass der Klick beim Endbenutzer den Eindruck vermittelt, er würde nichts weiteres machen, als den Link "Bild laden" zu entfernen...

Meine erste Idee war die zusätzliche Implementierung eines nur wenige KB großen "Bild wird geladen" Hintergrundbildes, welches ja durch "Flowers.jpg" verdeckt werden würde...
das kann ich klarerweise nicht in der Funktion "loadImage" festschreiben, da ich dieses Hintergrundbild ja sonst DIREKT in das "img" laden würde (was so natürlich auch nicht funktionieren kann). Ich habe weiters damit experimentiert, ein Hintergrundbild in einer eigenen Funktion zu deklarieren, um es nachher in einer das Bild umhüllenden DIV auszulösen [document.getElementById(id).style.backgroundImage = "url(bg.jpg)";], was nie funktioniert hat...

Da ich eigentlich nicht Stunden damit verbringen will eine Quasi-Lösung auf die Beine zu stellen, wollte ich fragen, ob hier jemand eine "korrekte" Lösung zu diesem Problem hat.

Dabei lege ich absoluten Wert auf PERFORMANCE, Responsibility und vor allem NACHVOLLZIEHBARKEIT; - NICHT auf Bling Bling (ergo keine Lightbox-Lösungen, bzw. präferiere ich eine Lösung ohne zusätzlichen Bibliotheken à la jQuery, bzw. PlugIns)

Vielen Dank!