Lavalampe, bewegte Bilder mit Javascript Preload

Film ab, jedes Bild wurde einzeln aufgenommen

Lavalampe

Bilder werden geladen, warte mal...

JavaScript Source für die Lavalampe

Das Ergebnis ist beeindruckend und hat mich selbst überrascht: Im Browser wird ein Film gezeigt, ohne dass dafür ein Plugin erforderlich ist! Für einen flüssigen Ablauf werden die einzelnen Bilder vorgeladen, im Browser wird ein Array mit Image-Objekten angelegt. Nachdem das letzte Bild vorgeladen wurde, greift für dieses Objekt der Handler .onload und startet die Vorführung.

var PICS = new Array(); for(i = 1; i <= 55; i++){ PICS[i] = new Image(); PICS[i].src = '/lavalampe/' + i + '.jpg'; } PICS[55].onload = function(){ document.getElementById('mesg').innerHTML = 'Fertig, ...'; window.setInterval("runcontrol()", 200); } function runcontrol(){ if(runcontrol.pic == null) runcontrol.pic = 1; // quasi static variable document.getElementById('guck').src = PICS[runcontrol.pic].src; runcontrol.pic++; if(runcontrol.pic == 56) runcontrol.pic = 1; }
Anbieter: nmq​rstx-18­@yahoo.de, die Seite verwendet funktionsbedingt einen Session-Cookie und ist Bestandteil meines nach modernen Aspekten in Perl entwickelten Frameworks.