nicht angemeldet
Bild vorausladen funktioniert nicht
Hi,
hier ist mein Code:
CSS:
#clip { position:fixed; width:100%; height:100%; background:url(bild.png); display:none; z-index:100; }
Javascript:
function show()
{
Vorladen = new Image();
Vorladen.src = "clip.png";
document.getElementById('clip').style.display = "block";
}
HTML:
<a href="#" onclick="show(); return false;">zeigen</a> <div id="clip" onclick="this.style.display = 'none';"> </div>
Der Javascript Code soll praktisch zuerst das "clip.png" Bild in den Cache laden und DANN den Div anzeigen. Bei mir wird der Div aber angezeigt, obwohl clip.png noch nicht fertig geladen hat. Was mach ich falsch?
-
Hi,
Der Javascript Code soll praktisch zuerst das "clip.png" Bild in den Cache laden und DANN den Div anzeigen.
warum sollte er das tun? Auf die Ladezeit des Bildes hat der Browser keinen Einfluss, und er baut derweil die Seite weiter auf.
Wenn Du das willst musst Du nicht nur das Vorladen anstossen, sondern auch periodisch überprüfen, ob das Bild geladen wurde. Dafür eignet sich z.B eine Eigenschaft wie width, die dann > 0 sein muss. Wenn dies der Fall ist wird die Überprüfung beendet und eine beliebige Aktion angestossen, z.B. das Anzeigen eines Html-Elements.Sichwort hierzu: setInterval, setTimout, clearInterval, clearTimeout...
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,
...eine Eigenschaft wie width, die dann > 0 sein muss. Wenn dies der Fall ist wird die Überprüfung beendet und eine beliebige Aktion angestossen, z.B. das Anzeigen eines Html-Elements.
Könntest du mir mal ein Codebeispiel schreiben? Ich kapiere nicht ganz wie du das meinst, wie kann ich prüfen od width größer wie 0 ist?
-
Hi,
ich verlasse mich nicht so gerne auf onload, ich machs etwa so
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head>
<script type="text/javascript">
// bild vorladen
//
var myimg = new Image();
myimg.src = "http://www.schwarz-weiss.net/gfx/gallery/200807201910-5qaqv.jpg";// onload rufen
//
var counter = 0;
function toggle_div() {if (myimg.height > 0) {
// wenn height vorhanden div anzeigen
document.getElementById("display-state").style.display = "";
} else if (counter < 10) {
// wenn height nicht vorhanden und Zähler < 10 Prüfung fortsetzen
setTimeout("toggle_div()", 500);
} else {
// Nach 10 * 500 ms aufgeben
alert ("Das Bild konnte nicht geladen werden!");
}
counter ++; // counter hochzählen
}
</script>
</head>
<body onload="toggle_div()">
<div id="display-state" style="padding: 10px;border:1px solid red; display: none;">Geladen!</div>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.-
<script type="text/javascript">
// bild vorladen
//
var myimg = new Image();
myimg.src = "http://www.schwarz-weiss.net/gfx/gallery/200807201910-5qaqv.jpg";// onload rufen
//
var counter = 0;
function toggle_div() {if (myimg.height > 0) {
// wenn height vorhanden div anzeigen
document.getElementById("display-state").style.display = "";
} else if (counter < 10) {
// wenn height nicht vorhanden und Zähler < 10 Prüfung fortsetzen
setTimeout("toggle_div()", 500);
} else {
// Nach 10 * 500 ms aufgeben
alert ("Das Bild konnte nicht geladen werden!");
}
counter ++; // counter hochzählen
}
</script>Funktioniert super, Danke!
-
-
-
-
Vorladen = new Image();
Vorladen.src = "clip.png";Diese Zuweisung führt dazu, dass die URI asynchron im Hintergrund geladen wird. Das JavaScript wird nicht angehalten, bis das Bild fertig geladen ist! Dafür gibt es das load-Ereignis bei selbigem Image-Objekt und du kannst einen Event-Handler dafür registrieren.
Vorladen.onload = function () {
document.getElementById('clip').style.display = "block";
};Der Javascript Code soll praktisch zuerst das "clip.png" Bild in den Cache laden und DANN den Div anzeigen.
... das macht der obige Code.
Mathias
-
Vorladen.onload = function () {
document.getElementById('clip').style.display = "block";
};Danke! Genau das habe ich gesucht! Aber noch eine Frage ... wie mach ich dass wenn ich mehrere Bilder vorausladen will?
Funktioniert das dann so?:
Vorladen.onload, Vorladen2.onload = function () { document.getElementById('clip').style.display = "block"; };-
Hi,
Danke! Genau das habe ich gesucht! Aber noch eine Frage ... wie mach ich dass wenn ich mehrere Bilder vorausladen will?
Du arbeitest mit einem array:
myimg = new Array(); // nimmt alle Bildobjekte auf
myimgname = new Array("bild1.jpg","bild2.jpg","bild3.jpg"); // enthält alle Namenund loopst mit einer schleife darüber, umm alle Bildobjecte zu generieren:
for (var i = 0; i < myimgname.length; i++){
myimg[i] = new Image();
myimg[i].src = myimgname[i];
}Gruesse, Joachim
--
Am Ende wird alles gut. -
Vorladen.onload, Vorladen2.onload = function () {
document.getElementById('clip').style.display = "block";
};Du hast hier zwei Ausdrücke, durch ein Komma getrennt. Ausdruck1, Ausdruck2; führt dazu, dass Ausdruck1 berechnet wird, dann Ausdruck2. Das Ergebnis von Ausdruck2 wird aber nicht dem Ergebnis von Ausdruck1 zugewiesen. Dazu müsstest du schon folgendes schreiben: bild1.onload = bild2.onload = function () { ... }; Mathias -- [JavaScript-Erweiterung für das SELFHTML-Forum](http://forum.de.selfhtml.org/js/doku/)
-
-