[JS/HTML] Bilder laden dauert lange

[TheMiller]

Hallo,

ich bin's nochmal mit einer JS-Frage: Ich lasse mir die Bilder, die in einer DB gespeichert sind verkleinern und erneut abspeichern. Demnach beträgt die größe ca. 2-3kb pro Bild. Jetzt habe ich doch gestern einen Ticker gebastelt, indem ich jetzt auch Bilder anzeigen lassen kann.

Dazu lade ich die Pfade zu den Bildern aus der DB in ein Array und übergabe img-Code folgendes:

Code:

[img].$picarray[0].[/img]

Dies funzt zwar, aber dauert ca 5-7 sek, bis die Bilder angezeigt werden. Wenn ich nur Text anzeigen lasse, funzt dies erheblich schneller..

Irgendwelche Tipps?

[JocalAreaNetwork]

Vielleicht ist dein Webserver einfach sehr langsam?

[TheMiller]

Hm... IE6? 1,8GHz, 512MB RAM :gruebel:

Sicher? Wie kann ich es noch testen?

[S2B]

Nicht dein PC, sondern dein Webserver. :mrgreen:

Versuch mal das: Page Generation Time

[TheMiller]

Das dauert auf dem Linux-Apache-Server (Lokales Intranet) sowie auf dem 1&1 Server gleich lange... Habe heute die ganze Zeit gebastelt. Ging aber nix... :wall:

[moritz]

Schau mal mit flush(), wo genau er hängt.

[TheMiller]

wie mit flush()? PHP oder JS??? Der Ticker ist in JS, wird aber komplett durch PHP echo ausgegeben, da ich sonst das Array von den Tickertexten, die aus der DB geholt werden, nicht übergeben kann...

[moritz]

Was genau dauert denn so lange? Ich verstehe das Problem noch nicht ganz...kannst du das ganze genauer erklären oder ein bisschen Code posten?

Flush() ist eine PHP-Funktion, die den aktuellen Ausgabe-Buffer an den Client sendet.

[jfheins]

Falls du mein Image-script verwendest:

Beim ersten Mal braucht er immer etwas länger, weil er das Thumnail berechnet. Bei den Folgeaufrufen sollte er den Thumb schon haben, und den ausgeben. Berechnet er vll. den Thumb immer neu ?

[TheMiller]

Ok,

ich habe einen Ticker programmiert (in JS), der Texte im Schreibmaschineneffekt schreibt der Text und dann nach oben fährt und ausblendet. Das geht alles so schnell, wie ich es eingestellt habe. Zeit, um alles zu lesen.

Doch wenn ich jetzt ein Bild mit einbaue, ganz normal über <img src=...>, wobei der Pfad zuvor mitsamt den Tickertexten aus einer DB geladen wurde, dann dauert es ewig, bis der Text mit dem Bild erscheint. Dabei entsteht diese Pause von ca 5-7 Sekunden dann, wenn der erste Text (ohne Bild) weg ist und der neue mit Bild eingeblendet werden soll.

Den Thumb berechnet er nicht immer neu. Wenn dieser vom User hochgeladen wird, wird er gleich in die richtigen größen konvertiert und dann separat abgespeichert. Das Thumb wird in tatsächlicher Größe über das Script aufgerufen und es dauert zu Laden immer gleich lange, egal wie oft es schon durchlief.

Danke

@jfheins: Sorry, aber dein Script benutze ich leider nicht - hat mir bei der Programmierung aber weitergeholfen

[moritz]

Moin!

Lädst du die Nachrichten dynamisch nach oder sind die bereits vorgeladen? D.h. wenn der Text ausblendet, wird dann über AJAX der nächste geladen oder was passiert dann? Was passiert genau an der Stelle, wo er hängt?

Gruß

[TheMiller]

Wenn die Seite aufgerufen wird, werden per PHP aus der MySQL-Tabelle die Daten geladen und in ein Array gespeichert. Dieses wird dann an JS übergeben. Er hängt aber nur, wenn ich die Bilder mit einfüge...

[moritz]

Hm, kannst du evtl. den Code posten?

[TheMiller]

klar:

Code:

<?
echo "<SCRIPT type=\"text/javascript\" LANGUAGE=\"JavaScript\"> 
<!-- 

var message = \"Deine Nachricht hier? Einfach in deinen Account-Einstellungen einen Tickertext abschicken!!\" 
var character = 0; 
var to_print = \"\"; 
var ypos = 40; 
var next = 0 ; 
var fade = 100 ; 
var next_message = new Array() ; 
var a = 0;
var b = 0;




next_message[0] = \"$tickerarray[0]\"
next_message[1] = \"$tickerarray[1]\"
next_message[2] = \"$tickerarray[2]\"
next_message[3] = \"$tickerarray[3]\"
next_message[4] = \"$tickerarray[4]\"
next_message[5] = \"$tickerarray[5]\"
next_message[6] = \"$tickerarray[6]\"
next_message[7] = \"$tickerarray[7]\"
next_message[8] = \"$tickerarray[8]\"
next_message[9] = \"$tickerarray[9]\"
next_message[10] = \"$tickerarray[10]\"
next_message[11] = \"$tickerarray[11]\"
next_message[12] = \"$tickerarray[12]\"
next_message[13] = \"$tickerarray[13]\"
next_message[14] = \"$tickerarray[14]\"
next_message[15] = \"$tickerarray[15]\"
next_message[16] = \"$tickerarray[16]\"
next_message[17] = \"$tickerarray[17]\"
next_message[18] = \"$tickerarray[18]\"
next_message[19] = \"$tickerarray[19]\"
next_message[20] = \"$tickerarray[20]\"
next_message[21] = \"$tickerarray[21]\"
next_message[22] = \"$tickerarray[22]\"
next_message[23] = \"$tickerarray[23]\"
next_message[24] = \"$tickerarray[24]\"
next_message[25] = \"$tickerarray[25]\"
next_message[26] = \"$tickerarray[26]\"
next_message[27] = \"$tickerarray[27]\"
next_message[28] = \"$tickerarray[28]\"
next_message[29] = \"$tickerarray[29]\"
next_message[30] = \"$tickerarray[30]\"


function doText(text) { a++;
  if (document.all) 
   { 
    if (character <= text.length - 1) 
    { 
      to_print += text.charAt(character); 
      ticker.innerHTML = to_print; 
      character++; 
     
    }
    
    if(a >= text.length +50)
     {
      scrollIt();
     }
    } 
  setTimeout(\"doText(message)\", 50); 
  } 

function scrollIt() { 

  if (ypos >= 0) { 
    ypos -= 1; 
    fade -= 4; 
    if (ypos < 5) { 
      ticker.innerHTML = \"\" ; 
      } 
    } 
  else { 
    a=0;
   b++;
    ypos = 40; 
    character = 0; 
    to_print = \"\"; 
    nextMessage(); 
    fade = 100; 
    } 
  ticker.style.top = ypos; 
  ticker.filters.alpha.opacity = fade; 
  
  } 

function nextMessage() { 
  message = next_message[next] 
  if (next == 30) { 
    next = 0; 
    } 
  else 
  next++; 
  } 

// --> 

</script>";
?>

Sorry, wegen dem langen Array ;-)

[TheMiller]

keine eine Idee mehr?