An alle Javascript Profis

renkert.net · 26.08.2004, 05:09

Hallo zusammen,

ich hab mal eine generelle Frage bzw. eine Idee und derzeit leider keine Ahnung wie sich das realisieren lässt.

Situation:
Ich möchte innerhalb einer Javascript-API einen Preloader integrieren. Dieser Preloader soll jedoch weniger wie in bislang bekannten Preloadern Grafikdateien laden, sondern soll je nach Einstellung verschiedene Javascript-Dateien (sogenannte Module) nachladen und bestimmte Javascript-Befehle ausführen, z.B. eine layerbasiertes Layout erstellen, indem dynamisch die notwendigen Layer generiert werden.

Plan:
Ich fände es toll, wenn wie unter WIN oder anderen OS ein Hinweisfenster mit einem Preload-Balken erscheint, der dem User anzeigt: Moment, alle Dateien werden geladen und alle Scriptbefehle ausgeführt.

Problem:
Nehmen wir an, der Preloader läuft in Realtime, dann muss ich a.) wissen, welche Speed der User hat (das kann man ja noch einigermassen exakt mit Javascript ermitteln), b.) wie gross die zu ladenden Dateien sind und c.) wie lange die Ausführung der Scripte benötigt.

Die Dateigrösse könnte man ja noch fix in einem Array ablegen und mittels Speed die Downloadzeit berechnen. Was aber, wenn die Dateigrösse variabel, also dynamisch ermittelt werden sollte.

Wie prüfe ich elegant, ob die Datei bereits im Cache des Browsers liegt?

Würde mich interessieren, ob sich schonmal jemand mit so etwas auseinander gesetzt hat oder mal gesehen hat...

Bin für jeglichen Input dankbar, auch für Hinweise auf Denkfehler...denen ich leider oft erlegen bin...

Danke vorab!

Adromir · 26.08.2004, 07:34

Ich finde solche Arten von Homepagegestaltung nicht wirklich gelungen, wenn von vornherein alle Surfer, die kein JS aktiviert haben, ausgeschlossen werden. Und das sind teilweise mehr als man denkt (zB. an vielen Firmen/Uni/Schulrechnern)

renkert.net · 26.08.2004, 13:11

Zitat:

Zitat von Adromir

Ich finde solche Arten von Homepagegestaltung nicht wirklich gelungen, wenn von vornherein alle Surfer, die kein JS aktiviert haben, ausgeschlossen werden. Und das sind teilweise mehr als man denkt (zB. an vielen Firmen/Uni/Schulrechnern)

Das war irgendwie nicht meine Frage, oder ? Wer hat von einer Homepage gesprochen ?

Stuck Mojo · 26.08.2004, 14:03

Crossbrowser wirds schwierig denke ich... Einige Einschränkungen musst du definitiv hinnehmen, da ich nicht glaube, dass du die Grösse einer Datei per JS herausbekommst... Beim IE gibt es für viele Objekte, die readyState-Eigenschaft. Diese kannst du abfragen und weisst ob das Script/Modul fertig geladen ist oder nicht. Genauso kannst du auch auf events reagieren:

Code:

function checkLoaded() {
    if (this.readyState == "complete") {
        // preloader-update...
    }
}

modul1.onreadystatchange = checkLoaded;
modul2.onreadystatchange = checkLoaded;
modul3.onreadystatchange = checkLoaded;
...

...das nurmal kurz angerissen. Das gleiche kann man sicher auch mit Mozilla lösen - musste mal schauen.

http://www.bindows.net ...nutzt sowas z.B. auch seeehr oft.

Gruss
Jan

renkert.net · 26.08.2004, 14:17

Danke erstmal, bindows kenne ich, ist aber leider nicht OpenSource oder GPL. Davon abgesehen basiert bindows auf einem anderen Ansatz, XML, das hatte ich nicht vor, da das unter IE nur unter Verwendung von ActiveX Kompontenten funktioniert.

Die Idee mit readyState hatte ich auch schon, das wäre die Lösung, ist leider nicht mit Mozilla hinzubekommen....bzw ist es schon (siehe http://www.formatvorlage.de/mozine/archives/000134.html), dann müsste ich aber auch auf XML umsteigen...boah....hab ich echt keine Lust...

Vielleicht findet noch jemand was.....

Trotzdem Danke Mojo....

Stuck Mojo · 26.08.2004, 15:04

zu Bindows: ne GPL würde dir auch nix bringen (ich geh mal davon aus, dass du dein Werk nicht auch unter dieser veröffentlichen willst)...

Mozilla unterstütz sowas ähnliches:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      " DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Test</title>
</head>
<body>
<script>
function malschauen() {
    try {
        nachgeladen();
    } catch(e) {
        alert(e.message);
    }
}

var lala = document.createElement("script");
lala.src = "lala.php";
lala.language = "JavaScript";
lala.onreadystatechange = malschauen;

if (document.addEventListener)
    lala.addEventListener("load", malschauen, false);


var head = document.getElementsByTagName("head")[0];
head.appendChild(lala);
alert("und los...");

</script>
</body>
</html>

dann die lala.php z.B. so:

PHP-Code:


			
<?php

sleep(2);

?>

function nachgeladen() {

    alert("ich wurde nachgeladen");

}

Klappt im IE und im Mozilla... Opera leider nicht...

Gruss
Jan

renkert.net · 27.08.2004, 09:11

Muss ich mir mal anschauen, hmmm, ein ähnliches Schnippsel hab ich auch bereits in meiner API, auch mit dem Vermerk no Opera:

// Geht nur in IE und MOZ, no OP
maxxPROTO.load_js=function(js)
{
var scriptTag = this.elm.getElementById('loadScript');
var head = this.elm.getElementsByTagName('head').item(0);
if(scriptTag)
head.removeChild(scriptTag);
script = this.elm.createElement('script');
script.src = this.modulepath+js+".js";
script.type = 'text/javascript';
script.id = 'loadScript';
head.appendChild(script);
}

hab ich mit document.write ('<script>.......</script>') umgangen....hier gibts nur ein Problem mit dem "wann wird das script eingeladen", das muss ich nochmal testen....

Das mit der Lizenz iss nicht so wichtig, Javascript lässt sich sehr schlecht codieren, von daher iss es nachher eh egal...

Trotzdem Danke nochmal...