nicht angemeldet
Bild nachladen mit preloader
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!
-
Hi,
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...Wenn du das für alle betroffenen Bilder brauchst – warum formatierst du sie dann nicht bereit in deinem Stylesheet mit diesem Hintergrundbild?
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.
Deine jetzige ist schon mehr eine „Quasi-Lösung“ – insb. img-Element mit scr="#1' von Anfang an im Quelltext zu haben, könnte problematisch sein.
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/-
Und GERADE schlage ich die Hände über meinem Kopf zusammen - DANKE!
Habe, wie von dir vorgeschlagen, das Hintergrundbild jetzt einfach für img im CSS definiert!Wieder mal ein akkuter Anfall von Betriebsblindheit.
Wieso könnte src='#1' ein Problem darstellen?
Hi,
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...Wenn du das für alle betroffenen Bilder brauchst – warum formatierst du sie dann nicht bereit in deinem Stylesheet mit diesem Hintergrundbild?
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.
Deine jetzige ist schon mehr eine „Quasi-Lösung“ – insb. img-Element mit scr="#1' von Anfang an im Quelltext zu haben, könnte problematisch sein.
MfG ChrisB
-
Hi,
Wieso könnte src='#1' ein Problem darstellen?
Weil es auf die selbe Adresse referenziert, wie die des aktuellen Dokumentes – und deshalb ein Browser die Ressource erneut anfordern könnte(!). (Erst HTML5 hat spezifiziert, wie mit solchen (quasi-) leeren URLs für externe Ressourcen umzugehen ist … und ich würde mich nicht darauf verlassen, dass das alle Browser korrekt [bzw. wie gewünscht] handhaben.)
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/-
Ja, das erscheint mir logisch...
Problem ist dabei aber, dass das Dokument ohne diese Referenz an den Dokumentenanfang "springt". Gibts eine vernünftigere Lösung dafür?
Hi,
Wieso könnte src='#1' ein Problem darstellen?
Weil es auf die selbe Adresse referenziert, wie die des aktuellen Dokumentes – und deshalb ein Browser die Ressource erneut anfordern könnte(!). (Erst HTML5 hat spezifiziert, wie mit solchen (quasi-) leeren URLs für externe Ressourcen umzugehen ist … und ich würde mich nicht darauf verlassen, dass das alle Browser korrekt [bzw. wie gewünscht] handhaben.)
MfG ChrisB
-
-
-
-
Meine Herren!
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)
Unter diesen Umständen:
<link type="prefetch" src="foo.png">Laut Wikipedia in den meisten modernen Browsern implementiert.
--
“All right, then, I'll go to hell.” – Huck Finn-
Meine Herren!
<link type="prefetch" src="foo.png">Sollte natürlich
<link rel="prefetch" href="foo.png">heißen--
“All right, then, I'll go to hell.” – Huck Finn
-