Bilder mit Javascript manipulieren - ohne Javascript laden, anzeigen, austauschen

Bilder laden ohne Javascript- mit Bildern spielen und sie austauschen anhand eines Timers

Du kannst deine Bilder erst einmal im Hintergrund laden. Das geht, indem du in dein CSS folgende Anweisung notierst: div#vieleBilder {display: none;}. Unten im Code notierst du dann:

<div id="vieleBilder">
Dieses Div-Element hat die Eigenschaft 
von Display:none. Es wird also nicht 
angezeigt.So kann man hier viele Bilder 
einfügen. Diese werden dann geladen, 
aber nicht angezeigt. Während der Nutzer 
die Seite nun erst einmal studiert, werden 
diese Bilder in den Speicher geladen. 
Nach dem Laden können die Bilder 
anderweitig genutzt werden, z.B. 
verschoben oder ausgetauscht.
Dieses Div-Element steht am Ende des 
Dokumentes.

<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_0.png" alt="changeling_0" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_1.png" alt="changeling_1" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_2.png" alt="changeling_2" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_3.png" alt="changeling_3" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_4.png" alt="changeling_4" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_5.png" alt="changeling_5" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_6.png" alt="changeling_6" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_7.png" alt="changeling_7" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_8.png" alt="changeling_8" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_9.png" alt="changeling_9" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_10.png" alt="changeling_10" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_11.png" alt="changeling_11" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_12.png" alt="changeling_12" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_13.png" alt="changeling_13" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_14.png" alt="changeling_14" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_15.png" alt="changeling_15" />
<img src="http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_16.png" alt="changeling_16" />
</div>

Hier siehst du die Ladezeiten der kompletten Seite in Chrome:

Bilder im Hintergrund laden - Ladezeiten anzeigen

Der folgende Code generiert einen primitiven Button mit einem onclick event. Falls man draufklickt, wird die Funktion „Bildspiel()“ gestartet. Diese Startet „Uhr_1()“. „Uhr_1()“ startet „Uhr_2()“, diese „Uhr_3()“ usw. bis „Uhr_17()“, die wiederum „Uhr_1()“ startet. Das ganze ist also ein Kreislauf.

Jedes Mal wird ein Timer oder eine Stopuhr installiert mit dem Befehl „setInterval“. Dafür wird die Variable „neuesIntervall“ genutzt. In der nächsten Funktion wird die Variable daraufhin vernichtet und wieder neu erstellt. Nach 50 Millisekunden wird also immer das nächste Bild angezeigt. Hätte man die Bilder nicht im Div-Elemet unten versteckt, so würde der Browser die Bilder erst dann laden, wenn man auf den Knopf drückt, um die Animation zu starten.


<script>

neuesIntervall=1;

var Uhr_1 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+0+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_2()}, 50);
}
var Uhr_2 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+1+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_3()}, 50);
}
var Uhr_3 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+2+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_4()}, 50);
}
var Uhr_4 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+3+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_5()}, 50);
}
var Uhr_5 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+4+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_6()}, 50);
}
var Uhr_6 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+5+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_7()}, 50);
}

var Uhr_7 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+6+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_8()}, 50);
}

var Uhr_8 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+7+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_9()}, 50);
}

var Uhr_9 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+8+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_10()}, 50);
}

var Uhr_10 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+9+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_11()}, 50);
}

var Uhr_11 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+10+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_12()}, 50);
}

var Uhr_12 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+11+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_13()}, 50);
}

var Uhr_13 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+12+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_14()}, 50);
}

var Uhr_14 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+13+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_15()}, 50);
}

var Uhr_15 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+14+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_16()}, 50);
}

var Uhr_16 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+15+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_17()}, 50);
}

var Uhr_17 = function () {
document.getElementById("kaleidoskop").src = "http://www.primitivecode.com/language/images/Kompass-javascript-Bilder/kaleidoskop/changeling_"+16+".png";
clearInterval(neuesIntervall);
neuesIntervall = setInterval(function (){Uhr_1()}, 50);
}





function Bildspiel() {
Uhr_1 ();
}


</script>
<button onclick="Bildspiel()">Starte die Animation</button>
changeling_0

Description: Dieser Beitrag handelt von Bildern. Es geht um getElementByID, um Schleifen, darum wie man am Besten Bilder lädt und wie man sie nach dem Laden austauschen kann. Es wird ebenfalls beschrieben, wie der Zusammenhang von DOM, HTML und Javascript ist.

Keywords: Javascript, Grundlagen, Webprogrammierung, getElementById, Schleife, For-Schleife, src, DOM, HTML, Bilder, laden
Geschrieben:
Sprache: de (Deutsch)
Lizenz: © Karsten Fink
Dieses Div-Element hat die Eigenschaft von Display:none. Es wird also nicht angezeigt. So kann man hier viele Bilder einfügen. Diese werden dann geladen, aber nicht angezeigt. Während der Nutzer die Seite erst einmal studiert, werden diese Bilder in den Speicher geladen. Nach dem Laden können die Bilder anderweitig genutzt werden, z.B. verschoben oder ausgetauscht. changeling_0 changeling_1 changeling_2 changeling_3 changeling_4 changeling_5 changeling_6 changeling_7 changeling_8 changeling_9 changeling_10 changeling_11 changeling_12 changeling_13 changeling_14 changeling_15 changeling_16

Primitivecode ist Grammatik pur. Aber Programmieren kommt auch nicht zu kurz, denn die Seite mache ich allein. Informationen zum Datenschutz findest du hier.