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;
    }

Datenschutzerklärung: Diese Seite dient rein privaten Zwecken. Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. sos@rolfrost.de.