Jan: Mac OS Safari Javascript

Hallo zusammen,

folgender Javascript Code funktioniert nicht unter Mac OS, und ich kann mir nicht erklären wieso. Interessanterweise läuft das Skript in der Windowsversion von Safari. Ich habe folgenden ImagePreloader verwendet:

http://www.webreference.com/programming/javascript/gr/column3/

Und diesen lediglich um eine kleine "Animation" (Einen Text der zweimal pro Sekunde um einen Punkt erweitert wird) ergänzt. Ich weiß nicht genau, welche Befehl Safari unter Mac OS nicht ausführt, jedenfalls steht meine "Animation" in einer Endlosschleife hängen, obwohl alle Bilder entsprechend geladen werden. Die Objektroutine onComplete wird also nicht aufgerufen, ebensowenig onerror oder onabort. Hat jemand dazu irgendwelche Anregungen?

-------------------------

var preload_text ='Preloading';

// Animation im Preload Div
function preload_progress()
{
preload_text += '.';
window.document.getElementById("theDiv").innerHTML=preload_text ;

}

//Imagepreloader Objekt initieren

function ImagePreloader(images, callback)

{
 // Hide the content until all is preloaded
 document.getElementById("theDiv").style.display="inline";
 //document.getElementById("page").style.display="none";
   // store the call-back

window.document.getElementById("theDiv").progress=setInterval("preload_progress()", 500);
   this.callback = callback;

// initialize internal state.
   this.nLoaded = 0;
   this.nProcessed = 0;
   this.aImages = new Array;

// record the number of images.
   this.nImages = images.length;

// for each image, call preload()
   for ( var i = 0; i < images.length; i++ )
      this.preload(images[i]);
}

// Image Preloader Objektfunktionen und Attribute

ImagePreloader.prototype.preload = function(image)
{

// create new Image object and add to array
   var oImage = new Image;
   this.aImages.push(oImage);

// set up event handlers for the Image object
   oImage.onload = ImagePreloader.prototype.onload;
   oImage.onerror = ImagePreloader.prototype.onerror;
   oImage.onabort = ImagePreloader.prototype.onabort;

// assign pointer back to this.
   oImage.oImagePreloader = this;
   oImage.bLoaded = false;
   // assign the .src property of the Image object
   oImage.src = image;
}

ImagePreloader.prototype.onComplete = function()
{

clearInterval(window.document.getElementById("theDiv").progress);
   this.nProcessed++;
   if (this.bError == true){
    window.document.getElementById("theDiv").innerHTML = "Error while preloading site [one or more images could not be loaded]!";}

if ( this.nProcessed == this.nImages )
   {
      this.callback(this.aImages, this.nLoaded);
   }

}

ImagePreloader.prototype.onload = function()
{
   this.bLoaded = true;
   this.oImagePreloader.nLoaded++;
   this.oImagePreloader.onComplete();
}

ImagePreloader.prototype.onerror = function()
{
 clearInterval(window.document.getElementById("theDiv").progress);
   this.bError = true;
   this.oImagePreloader.onComplete();
}

ImagePreloader.prototype.onabort = function()
{
 clearInterval(window.document.getElementById("theDiv").progress);
   this.bAbort = true;
   this.oImagePreloader.onComplete();
}

  1. Hat niemand eine Idee :-(? Kennt denn jemand eine Website oder einen Verifier ähnlich wie jslint, der nach Safari unter Mac Os Standards arbeitet?

    1. Hat niemand eine Idee :-(?

      Du könntest eine Seite mit dem genannten Quelltext verlinken, auf die ich einen Safari mit JavaScript Console loslassen würde.

      Roland

      --
      Aquahu akbar!
      1. Hat niemand eine Idee :-(?

        Du könntest eine Seite mit dem genannten Quelltext verlinken, auf die ich einen Safari mit JavaScript Console loslassen würde.

        Roland

        Hallo,

        danke für Deine Antwort. Es geht um die folgende Seite:

        recyclink[punkt]de/index.html

        Viele Grüße,
        Jan

        1. recyclink[punkt]de/index.html

          Sowohl indexhighres.html als auch indexlowres.html funktionieren mit Safari 3 eingeschränkt mit der Fehlermeldung „ReferenceError: Can't find variable: start“, die sich auf frame_zentral_navigation(_klein).html bezieht.

          Safari 2.0.0 bis 2.0.4 beenden das Script nicht, zeigen keine Bilder und liefern 38 Mal die Meldung „Undefinded value - Line: 152“ und verweisen auf die Zeile

          ImagePreloader.prototype.onload = function()  
          {  
             this.bLoaded = true;  
             this.oImagePreloader.nLoaded++;  // Zeile 152  
             this.oImagePreloader.onComplete();  
          }
          

          Woran es liegt, kann ich mangels JS-Interesse leider nicht beurteilen.

          Roland

          --
          Aquahu akbar!
          1. this.oImagePreloader.nLoaded++;  // Zeile 152

            Vermutlich wird nLoaded nirgends gesetzt.

            Struppi.

            1. this.oImagePreloader.nLoaded++;  // Zeile 152

              Vermutlich wird nLoaded nirgends gesetzt.

              Struppi.

              Danke für die Unterstützung auf jeden Fall!

              Allerdings unter Windows FF und IE funktioniert die Seite. nLoaded wird hier mit anderen Objektvariablen gesetzt (sh den oben gepostet Code)

              --------------
                 // initialize internal state.
                 this.nLoaded = 0;
                 this.nProcessed = 0;
                 this.aImages = new Array;

              // record the number of images.
                 this.nImages = images.length;

              // for each image, call preload()
                 for ( var i = 0; i < images.length; i++ )
                    this.preload(images[i]);
              -------------

              Benötige ich da möglicherweise eine andere Syntax bei der Initialisierung der Objektvariablen?

              1. Allerdings unter Windows FF und IE funktioniert die Seite.

                Nur unzureichend. Die Firefox-Konsole meldet

                Fehler: start ist not defined
                Zeile: 514
                Quelldatei: /script/navigation.js

                //Bilder beschleunigen  
                function speedup(start, end, tick, timeout){  
                  if(step<start){  
                    step=start;  
                  }  
                  if(step<end){  
                    step=step+tick;  
                    setTimeout("speedup(start, end)", timeout);  // Fehler  
                  }  
                }
                

                Roland

                --
                Aquahu akbar!
                1. Allerdings unter Windows FF und IE funktioniert die Seite.

                  Nur unzureichend. Die Firefox-Konsole meldet

                  Fehler: start ist not defined
                  Zeile: 514
                  Quelldatei: /script/navigation.js

                  //Bilder beschleunigen

                  function speedup(start, end, tick, timeout){
                    if(step<start){
                      step=start;
                    }
                    if(step<end){
                      step=step+tick;
                      setTimeout("speedup(start, end)", timeout);  // Fehler
                    }
                  }

                  
                  >   
                  > Roland  
                  >   
                    
                  Richtig, der Fehler ist mir gerade aufgefallen. Der rekursive aufruf sollte natürlich lauten:  
                    
                   ~~~javascript
                  //Bilder beschleunigen  
                   function speedup(start, end, tick, timeout){  
                     if(step<start){  
                       step=start;  
                     }  
                     if(step<end){  
                      step=step+tick;  
                     setTimeout("speedup(start, end, tick, timeout)", timeout);  // Fehler  
                    }  
                   }
                  

                  Mal sehen, vielleicht war dies auch der Grund für den Safari Ausfall.

                  1. Mal sehen, vielleicht war dies auch der Grund für den Safari Ausfall.

                    Leider ist dem nicht so, den Fehler mit nLoaded kann ich mir nicht recht erklären.

                    Grüße,
                    jan

                  2. Allerdings unter Windows FF und IE funktioniert die Seite.

                    Nur unzureichend. Die Firefox-Konsole meldet

                    Fehler: start ist not defined
                    Zeile: 514
                    Quelldatei: /script/navigation.js

                    //Bilder beschleunigen

                    function speedup(start, end, tick, timeout){
                      if(step<start){
                        step=start;
                      }
                      if(step<end){
                        step=step+tick;
                        setTimeout("speedup(start, end)", timeout);  // Fehler
                      }
                    }

                    
                    > >   
                    > > Roland  
                    > >   
                    >   
                    > Richtig, der Fehler ist mir gerade aufgefallen. Der rekursive aufruf sollte natürlich lauten:  
                    >   
                    >  ~~~javascript
                    
                    //Bilder beschleunigen  
                    
                    >  function speedup(start, end, tick, timeout){  
                    >    if(step<start){  
                    >      step=start;  
                    >    }  
                    >    if(step<end){  
                    >     step=step+tick;  
                    >    setTimeout("speedup(start, end, tick, timeout)", timeout);  // Fehler  
                    >   }  
                    >  }
                    
                    

                    Mal sehen, vielleicht war dies auch der Grund für den Safari Ausfall.

                    Dies war ein Missverständnis von setTimeout, welches anscheinend keine Funktionsvariablen im Aufruf akzeptiert wohl aber objekte, also habe ich folgendes getan:

                      
                      
                    function speedup(start, end, tick, timeout){  
                      
                     if(step<start){  
                      step=start;}  
                      
                    if(step<end){  
                      step=step+tick;  
                      
                      var callback1 = function() {speedup(start, end, tick, timeout);};  
                      
                      setTimeout(callback1, timeout);  
                     }  
                      
                    }
                    
                  3. Hallo,

                    //Bilder beschleunigen

                    function speedup(start, end, tick, timeout){
                       if(step<start){
                         step=start;
                       }
                       if(step<end){
                        step=step+tick;
                       setTimeout("speedup(start, end, tick, timeout)", timeout);  // Fehler
                      }
                    }

                      
                    Entweder die Variablen sind global, dann brauchst du sie nicht als Parameter übergeben, oder sie sind lokal, dann werden sie mit der Schreibweise nicht korrekt an die Funktion weitergegeben. Wenn du das willst, müsstest du sie in den String einbinden (wenn es alles Zahlen sind: "speedup(" + start + ", " + end + ", " + tick + ", " + timeout + ")") oder eine verschachtelte Funktion notieren und setTimeout diese Funktion übergeben (sie wirkt dann als Closure und hat Zugriff auf die lokalen Variablen der speedup-Ausführung).  
                      
                    `setTimeout(function () { speedup(start, end, tick, timeout); }, timeout);`{:.language-javascript}  
                      
                    Mathias
                    
                    -- 
                    [SELFHTML aktuell Weblog](http://aktuell.de.selfhtml.org/weblog/)
                    
                    1. Entweder die Variablen sind global, dann brauchst du sie nicht als Parameter übergeben, oder sie sind lokal, dann werden sie mit der Schreibweise nicht korrekt an die Funktion weitergegeben. Wenn du das willst, müsstest du sie in den String einbinden (wenn es alles Zahlen sind: "speedup(" + start + ", " + end + ", " + tick + ", " + timeout + ")") oder eine verschachtelte Funktion notieren und setTimeout diese Funktion übergeben (sie wirkt dann als Closure und hat Zugriff auf die lokalen Variablen der speedup-Ausführung).

                      setTimeout(function () { speedup(start, end, tick, timeout); }, timeout);

                      Mathias

                      Hi, danke für die Aufklärung. Ich hab jetzt mal folgenden Workaround angewendet:

                      //Bilder beschleunigen  
                      function speedup(start, end, tick, timeout){  
                        
                       if(step<start){  
                        step=start;}  
                        
                      if(step<end){  
                        step=step+tick;  
                        
                        var callback1 = function() {speedup(start, end, tick, timeout);};  
                        
                        setTimeout(callback1, timeout);  
                       }  
                        
                      }
                      
              2. Benötige ich da möglicherweise eine andere Syntax bei der Initialisierung der Objektvariablen?

                Nein.
                Lass dir mal die Werte, die du in der onload Funktion verwendest, anzeigen

                Struppi.

                1. Benötige ich da möglicherweise eine andere Syntax bei der Initialisierung der Objektvariablen?

                  Nein.
                  Lass dir mal die Werte, die du in der onload Funktion verwendest, anzeigen

                  Struppi.

                  Die Werte sind korrekt. nLoaded iteriert pro geladenem Image ind gibt diesen wert als Int aus, bLoaded steht nach jedem korrekt geladenen Bild auf True als boolean.

                  1. Die Werte sind korrekt. nLoaded iteriert pro geladenem Image ind gibt diesen wert als Int aus, bLoaded steht nach jedem korrekt geladenen Bild auf True als boolean.

                    Warum kommt dann im Safari die Warnung?

                    Struppi.

                    1. Die Werte sind korrekt. nLoaded iteriert pro geladenem Image ind gibt diesen wert als Int aus, bLoaded steht nach jedem korrekt geladenen Bild auf True als boolean.

                      Warum kommt dann im Safari die Warnung?

                      Struppi.

                      Ich habe hier das Problem dass ich keinen Mac safari habe und auch keinen emulieren kann, daher kann ich das schwer nachvollziehen:-(.

                      Ich habe es im Firefox mit Firebug und im IE 7 und IE 6 ausprobiert, da funktioniert die Preloading Funktion tadellos und die Safari Fehlermeldung kommt nicht.

                      Jan

                      1. Ich habe es im Firefox mit Firebug und im IE 7 und IE 6 ausprobiert, da funktioniert die Preloading Funktion tadellos und die Safari Fehlermeldung kommt nicht.

                        Safari 3 zeigt *keinen* Fehler mehr in der JavaScript-Konsole. Hier funktioniert alles wie gewünscht.

                        Safari 2 meckert noch über diesen Fehler.

                        Roland

                        --
                        Aquahu akbar!
                        1. Ich habe es im Firefox mit Firebug und im IE 7 und IE 6 ausprobiert, da funktioniert die Preloading Funktion tadellos und die Safari Fehlermeldung kommt nicht.

                          Safari 3 zeigt *keinen* Fehler mehr in der JavaScript-Konsole. Hier funktioniert alles wie gewünscht.

                          Safari 2 meckert noch über diesen Fehler.

                          Roland

                          Richtig, sehr merkwürdig das Ganze. Ich bin ziemlich ratlos.

  2. Ich hab das Skript mal ein bisschen umgeschrieben.
    http://javascript.jstruebig.de/test/preloader.html
    Wie sieht's damit aus?
    In FF/IE/OP geht's.

    Struppi.

    1. http://javascript.jstruebig.de/test/preloader.html
      Wie sieht's damit aus?

      Safari 3: „6 Bilder konnten nicht geladen werden.“
      Safari 2: „0 Bilder konnten nicht geladen werden.“ (getestet mit 2.0.0 bis 2.0.4)
      Safari 1: „0 Bilder konnten nicht geladen werden.“

      Nirgendwo eine Spur von einem JS-Fehler in der Konsole.

      Roland

      --
      Aquahu akbar!
      1. http://javascript.jstruebig.de/test/preloader.html
        Wie sieht's damit aus?

        Safari 3: „6 Bilder konnten nicht geladen werden.“

        Danke für's testen.
        und er hat recht. (Groß und Kleinschreibung vergessen, der Ordner heißt bilder), ich hab's angepaßt.

        Safari 2: „0 Bilder konnten nicht geladen werden.“ (getestet mit 2.0.0 bis 2.0.4)
        Safari 1: „0 Bilder konnten nicht geladen werden.“

        Wobei das dann seltsam ist.

        Struppi.

        1. http://javascript.jstruebig.de/test/preloader.html

          (Groß und Kleinschreibung vergessen, der Ordner heißt bilder), ich hab's angepaßt.

          Danke.

          Safari 3: „2 Bilder konnten nicht geladen werden.“ (wiederum keine Meldung)
          Safari 2: „0 Bilder konnten nicht geladen werden.“
          Safari 1: „0 Bilder konnten nicht geladen werden.“

          Roland

          --
          Aquahu akbar!
          1. Safari 3: „2 Bilder konnten nicht geladen werden.“ (wiederum keine Meldung)

            Das ist ok, 2 Bilder sind nicht da.

            Safari 2: „0 Bilder konnten nicht geladen werden.“
            Safari 1: „0 Bilder konnten nicht geladen werden.“

            Dann feuern die den error Event nicht.

            Struppi.

            1. Safari 3: „2 Bilder konnten nicht geladen werden.“ (wiederum keine Meldung)

              Das ist ok, 2 Bilder sind nicht da.

              Safari 2: „0 Bilder konnten nicht geladen werden.“
              Safari 1: „0 Bilder konnten nicht geladen werden.“

              Dann feuern die den error Event nicht.

              Struppi.

              Wow, danke für die Unterstützung. Dann ist es wohl doch ein Implementierungsfehler des Preoladers meinerseits und kein Browserbug. Wie lautet denn die URL zu dem Skript auf deiner Testseite, damit ich mal vergleichen kann?

              Grüße,
              jan

              1. Safari 3: „2 Bilder konnten nicht geladen werden.“ (wiederum keine Meldung)

                Das ist ok, 2 Bilder sind nicht da.

                Safari 2: „0 Bilder konnten nicht geladen werden.“
                Safari 1: „0 Bilder konnten nicht geladen werden.“

                Dann feuern die den error Event nicht.

                Struppi.

                Wow, danke für die Unterstützung. Dann ist es wohl doch ein Implementierungsfehler des Preoladers meinerseits und kein Browserbug. Wie lautet denn die URL zu dem Skript auf deiner Testseite, damit ich mal vergleichen kann?

                Grüße,
                jan

                Ach, sehe gerade es ist ein inline script. Ich kanns mir erst heute abend genauer ansehen, melde mich dann noch einmal.

                Jan

                1. Ach, sehe gerade es ist ein inline script. Ich kanns mir erst heute abend genauer ansehen, melde mich dann noch einmal.

                  Jan

                  Hallo,

                  ich habe mir das Verhalten des Safari 2.0 gerade mal genauer angesehen. Scheinbar ist es so dass in der onload Objektfunktion  die kindelemente von oImagePreloader generell nicht gefunden werden. D.h.  kommentiere ich die Zeile mit nLoaded aus, wirft der Debugger eine Fehlermeldung für onComplete().

                  Dh für mich dass die markierte Zeile nicht funktioniert oder der Zeiger in safari 2 anders interpretiert wird:

                  [code langJavascript]ImagePreloader.prototype.preload = function(image)
                  {

                  // create new Image object and add to array
                     var oImage = new Image;
                     this.aImages.push(oImage);

                  // set up event handlers for the Image object
                     oImage.onload = ImagePreloader.prototype.onload;
                     oImage.onerror = ImagePreloader.prototype.onerror;
                     oImage.onabort = ImagePreloader.prototype.onabort;

                  // assign pointer back to this.
                     oImage.oImagePreloader = this; //diese Zeile hier
                     oImage.bLoaded = false;
                     // assign the .src property of the Image object
                     oImage.src = image;
                  }[/code]

                  1. ich habe mir das Verhalten des Safari 2.0 gerade mal genauer angesehen. Scheinbar ist es so dass in der onload Objektfunktion  die kindelemente von oImagePreloader generell nicht gefunden werden. D.h.  kommentiere ich die Zeile mit nLoaded aus, wirft der Debugger eine Fehlermeldung für onComplete().

                    Dir scheint das alte Skript lieber zu sein, ich kann dir aber nichts dazu sagen, ich hab keinen Safari und würd es anders machen. Wie ich es dann auch getan habe, das scheint ja im Safari zu funktionieren.

                    Struppi.

                    1. ich habe mir das Verhalten des Safari 2.0 gerade mal genauer angesehen. Scheinbar ist es so dass in der onload Objektfunktion  die kindelemente von oImagePreloader generell nicht gefunden werden. D.h.  kommentiere ich die Zeile mit nLoaded aus, wirft der Debugger eine Fehlermeldung für onComplete().

                      Dir scheint das alte Skript lieber zu sein, ich kann dir aber nichts dazu sagen, ich hab keinen Safari und würd es anders machen. Wie ich es dann auch getan habe, das scheint ja im Safari zu funktionieren.

                      Struppi.

                      Naja, vielleicht hänge ich zusehr am "alten" Skript:-) Nein, ich denke ich werde Deins einmal versuchen zu implementieren! Vielen Dank noch einmal für die Hilfe.

                      Jan