Lange Ladezeit bei Bildern

Gehe zu Seite:

Geschlossen

Mo. 04.02.2008 18:39 Uhr #1

Picard8888 Mitglied

Registriert seit
16.01.2008

Beiträge
21

Beitragswertungen
Ladezeit bei Bildern
Hallo,

Das Laden vom z.B Forumposts dauert z.T ewig. Usere User verwenden gerne Signaturen von Gamestats.

Grund dafür ist die Bildgrössenprüfung in der Funtion bbcode.
Ja ich weiss das Thema ist schon mehrfach angesprchen worden.
Im Moment arbeite ich mit folgender Lösung. Ich hab in der bbcode Funktion 3 Zeilen auskommentiert.
```
 /*
      $size   = @getimagesize($imgstr);
	  $breite = $neueBreite = $size[0];
      $hoehe  = $neueHoehe  = $size[1];
	   */
```
Funktioniert soweit wunderbar, die Seite wird wieder schnell aufgebaut, allerdings ohne das die Bildgrösse geprüft wird.

Was ich suche ist eine Lösung die beides umfasst schnelles Laden und Bildprüfung. Ich habe auch eine Idee dazu, brauche aber einen fähigen Scripter für die Umsetzung.

Ich möchte das mit Javascript lösen.
Die Idee: Die Seite mit ungeprüften Platzhaltern (blank.gif) von Bildern laden und anschliessend die Bilder geprüft von Javascript ersetzen lassen.

In der Funktion bbcode anstatt den richtigen Link zu gernerieren den Platzhalterlink mit eindeuiger ID im img Teil eintragen. Alle nötigen Werte für die Prüfung in ein Array übergeben, Urls und eindeutige Id (eventuell weitere Funktion hinzufügen die das Array an das Script (showforum.php) zurückgibt damit es dort aufaddiert werden kann).

So bishierhin sollte die Seite dann schnell aufgebaut werden durch die Platzhalter für Bilder.

An dieser Stelle soll dann Javascript in der showforum.php einsetzen und das Array abarbeiten, die Bilder prüfen und im Forum ersetzen.

Das ersetzen von Bildern durch Javascript geht. Ich hab schonmal codeschnipsel dafür gesehen. Aber es ist etwas komplizierter das in diesem Beispiel umzusetzen.

Vielleicht gibt es ja ein paar fähige Scripter hier die das Lösen könnten.

betroffene Homepage: externer Link

Zuletzt modifiziert von Picard8888 am 06.02.2008 - 14:20:46
0 Mitglieder finden den Beitrag gut.
- zitieren
Mo. 04.02.2008 19:40 Uhr #2

Mairu Coder

Registriert seit
16.06.2006

Beiträge
15.334

Beitragswertungen

Im BBCode 2.0 und ich hab den Code hier auch schon gepostet, auch auf ilch.de werden Bilder per Javascript verkleinert, kannst ja mal danach suchen.

Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
0 Mitglieder finden den Beitrag gut.
- zitieren
Mo. 04.02.2008 21:49 Uhr #3

Picard8888 Mitglied

Registriert seit
16.01.2008

Beiträge
21

Beitragswertungen

Danke. Ich werde es dann mal mit bbcode 2.0 versuchen.

Aber suchen auf dieser Seite "LOL". Zumindest ohne weitere Hinweise.

Suchbegriff: "Javascript" 27 Seiten je 30 Themen.
Suchbegriff: "Bilder verkleinern" 104 Seiten je 30 Themen.
hab natürlich auch noch andere Suchbegriffe verwendet.

Bin ja auch immer gerne bereits Zeit für eine Suche zu investieren, aber es gibt auch Grenzen. Die Suchmethode hier ist um es mal vorsichtig auszudrücken "bescheiden".
0 Mitglieder finden den Beitrag gut.
- zitieren
Mo. 04.02.2008 22:24 Uhr #4

Picard8888 Mitglied

Registriert seit
16.01.2008

Beiträge
21

Beitragswertungen
Vielleicht könnte mir trotzdem jemand helfen meine Idee umzusetzen. Ich möchte es nochmal vereinfachen.

Ich habe eine Seite die folgendes ausgibt.
```
<img id=bild1>blank.gif />
<img id=bild2>blank.gif />
```
Dann habe ich ein Array mit folgendem Aufbau.
```
$variablen = array(
"http://www.link1.de/bild1.jpg",
"http://www.link2.de/bild2.jpg")
```
Jetzt benötige ich ein paar Zeilen Javascript die mir das blank.gif mit den Bildern aus dem Array ersetzen.
0 Mitglieder finden den Beitrag gut.
- zitieren
Di. 05.02.2008 12:33 Uhr #5

Mairu Coder

Registriert seit
16.06.2006

Beiträge
15.334

Beitragswertungen

Nur wie willst du die Bilder aus mehreren Forenposts so vereinigen, dass auf einer anderen Seite, wo man weiß welche Bilder es gibt, sowas zu scripten ist ne nette Sache, naja gehen sollte es schon, ich schau es mir auf jeden Fall mal an.

Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
0 Mitglieder finden den Beitrag gut.
- zitieren
Di. 05.02.2008 17:25 Uhr #6

Picard8888 Mitglied

Registriert seit
16.01.2008

Beiträge
21

Beitragswertungen
Also der Grundgedanke ist das man mit Javascript halt ein <img> mit eindeutiger ID verändern kann.

Da die Posts ja in einer Schleife erzeugt werden, kann man jedes Bild mit einer eindeutigen ID versehen.

Wenn mir einer die Lösung für dies Beispiel gibt bekomm ich den Rest schon alleine hin.

Also erstellt eine php Datei mit folgendem Inhalt:
```
echo "<img id=\"bild1\" src=\"blank.gif\" />";
echo "<img id=\"bild2\" src=\"blank.gif\" />";
sleep (5); // Wartezeit damit man den Unterschied sieht

$variablen = array(
"http://www.link1.de/bild1.jpg",
"http://www.link2.de/bild2.jpg");
<script>


</script>
```
Zuletzt modifiziert von Picard8888 am 05.02.2008 - 17:36:05
0 Mitglieder finden den Beitrag gut.
- zitieren

Di. 05.02.2008 19:33 Uhr #7

Mairu Coder

Deine Codes lassen mich irgendwie vermuten, dass du doch nicht ganz so viel Ahnung hast zunge

Nagut der Code für die Bilder ist jetzt wenigstens schonmal richtig.

Naja "wir" machen es so, dass beim BBCode eine Klasse der mitgegeben wird -> <img src="..." class="bbcode_image" /> dann wird nachdem die Seite geladen ist, mit folgendem Javascript, der als Datei geladen wird, die Bilder bei denen es nötig ist die Größe geändert, so dass das Design nicht zerschossen wird.

function addonloadEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
 if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
 } else if (elm.attachEvent){
   var r = elm.attachEvent("on"+evType, fn);
   return r;
 } else {
   alert("Handler could not be removed");
 }
}

addonloadEvent(window, "load", erstAmEndeLaden);

function erstAmEndeLaden () {
  ResizeBBCodeImages();
}

//Funktion die alle Bilder des BBCodes der Funktion SetSize Ã¼bergibt
function ResizeBBCodeImages() {
  imgs = document.getElementsByTagName("img");
  for (ti=0;ti<imgs.length;ti++) {
    if (imgs[ti].className.indexOf("bbcode_image") != -1) {
      SetSize(imgs[ti]);
    }
  }
}

//Funktion zum Ändern der Bildgröße zu große Bilder
function SetSize(img){
  var maxw = 700;
  var w = img.width;
  var h = img.height;
  var toChange = false;
  if (w>maxw) {
    h = maxw * h / w;
    w = maxw;
    toChange = true;
    }
  if (toChange) {
    var src = img.getAttribute('src');
    if ( img.parentNode.nodeName.toLowerCase() == 'a' ) {
      img.setAttribute('width',w);
      img.setAttribute('height',h);
    } else {
      var ersatz = document.createElement('a');
      ersatz.setAttribute('href',src);
      ersatz.setAttribute('target','_blank');
      var newImg = document.createElement('img');
      newImg.setAttribute('src',src);
      newImg.setAttribute('width',w);
      newImg.setAttribute('height',h);
      newImg.setAttribute('border','0');
      ersatz.appendChild(newImg);
      img.parentNode.replaceChild(ersatz,img);
    }
  }
}

Da wäre die Breite 700.
Ich versuche allerdings derzeit es anders zu machen, mal sehen, ob ich zu einem brauchbaren Ergebnis komme.

Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite

0 Mitglieder finden den Beitrag gut.

zitieren

Di. 05.02.2008 22:04 Uhr #8

Picard8888 Mitglied

Registriert seit
16.01.2008

Beiträge
21

Beitragswertungen

Erstmal danke für die schnelle Antwort und Hut ab zu dem Script.

Zitat geschrieben von Mairu

Deine Codes lassen mich irgendwie vermuten, dass du doch nicht ganz so viel Ahnung hast
Nagut der Code für die Bilder ist jetzt wenigstens schonmal richtig.

Naja keine Ahnung ist relativ. Aus deiner Sicht hab ich vielleicht nicht viel Ahnung. Ich persönlich seh das anders. Wenn ich gefragt hätte "Mein Forum läd langsam, warum ist das so", dann würde ich das als keine Ahnung bezeichnen. Aber ich konnte das Problem ja bereits genau benennen und, bevor ich ins Forum gesehen habe, schon mal Übergangsweise lösen.
Grundsätzlich komme ich mit php mittlerweile sehr gut klar. So das zum Beispiel die Analyse von einem Script wie ilch nicht wirklich ein Problem ist (Nachdem man die Dokumentation gelesen hat).
Bei Javascript sieht es anders aus, da hab ich Null Plan von. Anderseits hab ich mittlerweile erkannt das man ohne nicht wirklich weiterkommt. Deshalb fang ich jetzt halt an mir ein paar Codeschnipsel zusammen zu suchen (oder zu erfragen) um mich in das Thema einzuarbeiten.

Aber zum Script. Deine Lösung ist natürlich wirklich elegant und eine "All inclusiv" Lösung. Ich habs mal in unser ilch eingebunden und funktioniert soweit einwandfrei und macht genau das was es soll. Beindruckend bei dem Script ist das man es direkt für alle Bereiche nutzen kann, indem man es einfach in eine eigene Datei läd.

Das einzige Problem das ich bisjetzt finden konnte ist wenn Bilder nicht geladen werden können. Dann wird die Seite nicht zuende geladen und dadurch aktiviert sich dann auch deine Erweiterung nicht.
0 Mitglieder finden den Beitrag gut.
- zitieren
Di. 05.02.2008 23:10 Uhr #9

Picard8888 Mitglied

Registriert seit
16.01.2008

Beiträge
21

Beitragswertungen

Kleines PS:

Ich hab das Problem mit den Bilder die nicht geladen werden übergangsweise gelöst. Ich weiss sicherlich keine saubere Lösung aber es funktioniert .

Ich lade einfach nur die: function ResizeBBCodeImages(); .
Diese Zeile muss man zwar in jede Seite einbauen auf dem man den Effekt haben möchte, aber für mich ist das ok.

Es ist ja leider oft so das Bilder nicht geladen werden können, insbesondere von den Freespace Anbietern oder Pichostern.

Funktioniert mit Firefox, IE und Opera. Bei Opera nur mit refresh nicht.

Der Unterschied ist schon enorm, vorher im original Script hat das Laden einer Forumseite mit vielen Bildern 5-10 Sekunden oder manchmal noch länger gedauert. Mit den Änderungen ist die Seite direkt verfügbar ohne das man auf etwas verzichten muss.

Zuletzt modifiziert von Picard8888 am 05.02.2008 - 23:20:42
0 Mitglieder finden den Beitrag gut.
- zitieren
Mi. 06.02.2008 22:41 Uhr #10

Picard8888 Mitglied

Registriert seit
16.01.2008

Beiträge
21

Beitragswertungen
@Mairu
Es geht um Bilder die langsam laden.

Ich habe mir mal das bbcode2.0 runtergeladen und reingeschaut. Dort ist ja dieses Javascript drin.

Hier ein Vorschlag wegen den Bildern die langsam laden.
Ich hab mal 2 Zeilen in den Eventhandler eingefügt.

Hier 2 Beispiele für die unterschiedliche Funktionsweise. Die Beispiele funktionieren nur korrekt bei geleertem Internet Cache. (am besten mit Firefox testen). Die Dateien enthalten einfach nur 2 Bilder. Eins mit normaler Ladezeit, eins mit langsamer Ladezeit.
Ohne Änderung:
externer Link
Mit Änderung:
externer Link
```
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
 if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   setTimeout("ResizeBBCodeImages()",5000);
   return true;
 } else if (elm.attachEvent){
   var r = elm.attachEvent("on"+evType, fn);
   setTimeout("ResizeBBCodeImages()",5000);
   return r;
 } else {
   alert("Handler could not be removed");
 }
}
```
Ich denke nicht das meine Lösung wirklich gut ist, du wirst bestimmt eine schöne elegante Lösung finden , aber sie funktioniert. Allerdings deckt sie sicherlich nicht alle Eventualitäten ab.

Zuletzt modifiziert von Picard8888 am 06.02.2008 - 23:04:37
0 Mitglieder finden den Beitrag gut.
- zitieren
Mi. 06.02.2008 23:00 Uhr #11

Mairu Coder

Registriert seit
16.06.2006

Beiträge
15.334

Beitragswertungen

Ja ich war auch schon dabei mir da was zu basteln, mal sehen ob ich was vernünftiges schaffe, werde das dann natürlich hier auch noch posten.

Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 07.02.2008 08:14 Uhr #12

LumaX Mitglied

Registriert seit
24.01.2008

Beiträge
41

Beitragswertungen

Hallo,

@Mairu,
mir zerstört die Signatur in den Userdetails das Design.
externer Link

Wie kann ich den Code den du gepostet hast dazu verwenden, dass ich den Fehler beheben kann.

Ich habe leider keine Ahnung von der Materie.

Grüße

LumaX

Gruß

Martin

externer Link
0 Mitglieder finden den Beitrag gut.
- zitieren
Di. 12.02.2008 00:11 Uhr #13

Picard8888 Mitglied

Registriert seit
16.01.2008

Beiträge
21

Beitragswertungen
Zum Einbinden des Codes musst du folgendes machen.

Ich glaube du hattest bbcodes2.0 bereits installiert. (falls nicht siehe ganz unten)

Erstelle eine Datei mit dem Namen "img_resize.js" und speichere sie im Ordner "include/includes/js" mit folgendem Code. Darin sind 2 Variablen, "var maxw = 700;" hier stellst du die gewünschte Bildbreite in Pixeln ein. Der Wert bei "setTimeout("ResizeBBCodeImages()",5000); " entspricht der Wartezeit bis das Script aufjedenfall ausgeführt wird in Millisekunden 5000 = 5 Sekunden). Die Timeout Zeile ist nicht unbedingt notwendig, deckt aber ein paar Eventualitäten ab. Der Wert sollte höher als die normale Ladezeit der Seite sein, kann aber auch deutlich unter 5 Sekunden liegen).
```
function addonloadEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
 if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   setTimeout("ResizeBBCodeImages()",5000); 
   return true;
 } else if (elm.attachEvent){
   var r = elm.attachEvent("on"+evType, fn);
   setTimeout("ResizeBBCodeImages()",5000); 
   return r;
 } else {
   alert("Handler could not be removed");
 }
}

addonloadEvent(window, "load", erstAmEndeLaden);

function erstAmEndeLaden () {
  ResizeBBCodeImages();
}

//Funktion die alle Bilder des BBCodes der Funktion SetSize Ã¼bergibt
function ResizeBBCodeImages() {
  imgs = document.getElementsByTagName("img");
  for (ti=0;ti<imgs.length;ti++) {
    if (imgs[ti].className.indexOf("bbcode_image") != -1) {
      SetSize(imgs[ti]);
    }
  }
}

//Funktion zum Ändern der Bildgröße zu große Bilder
function SetSize(img){
  var maxw = 700;
  var w = img.width;
  var h = img.height;
  var toChange = false;
  if (w>maxw) {
    h = maxw * h / w;
    w = maxw;
    toChange = true;
    }
  if (toChange) {
    var src = img.getAttribute('src');
    if ( img.parentNode.nodeName.toLowerCase() == 'a' ) {
      img.setAttribute('width',w);
      img.setAttribute('height',h);
    } else {
      var ersatz = document.createElement('a');
      ersatz.setAttribute('href',src);
      ersatz.setAttribute('target','_blank');
      var newImg = document.createElement('img');
      newImg.setAttribute('src',src);
      newImg.setAttribute('width',w);
      newImg.setAttribute('height',h);
      newImg.setAttribute('border','0');
      ersatz.appendChild(newImg);
      img.parentNode.replaceChild(ersatz,img);
    }
  }
}
```
In dem Fall von Lumax fügt man nur in der "user_details.php" ganz am Ende nach dem letztem "?>" diesen Code ein:
```
<script language="JavaScript" type="text/javascript" src="include/includes/js/img_resize.js">
</script>
```
Falls bbcode 2.0 nicht installiert ist. Muss man in der Datei "include/includes/func/bbcode.php in der Funktion: "function bbcode_images" die 3 Zeilen aus Antwort 1 auskommentieren in den beiden img Tags aus der Funktion dies einfügen:
```
class=\"bbcode_image\"
```
Danach sollte der Aufruf entweder für alle Dateien in der index.html gemacht werden oder in jedem Modul, wo der Effekt auftauchen soll, eingebunden werden.

Ich habe z.B das ganze (ohne bbcode2.0) in der show_posts.php und news.php eingebunden.

Ich habe bbcode2.0 nicht installiert. Es sollte aber wie oben beschrieben funktionieren.

Mit den Zeilen von Mairu lässt sich theoretisch jede Seite mit anderer Bildgrösse anzeigen.
Es gibt auch diverse Möglichkeiten das ganze einzubinden, hängt halt davon ab was man möchte. Ich habe auch mal testweise eine Änderung gemacht die beim Aufruf (z.B in der show_posts.php) direkt den Wert der Bildgrösse übergibt.

Zuletzt modifiziert von Picard8888 am 12.02.2008 - 02:01:35
0 Mitglieder finden den Beitrag gut.
- zitieren

Mo. 18.02.2008 10:06 Uhr #14

Mairu Coder

Naja falls es interessiert, ich hab nochmal eine andere Technik versucht umzusetzen.
Hier meine Testseite

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>

<table border="1" width="500">
<tr><td width="50">1</td><td width="450"><img name="img0" src="loading.gif" /></td></tr>
<tr><td>2</td><td><img name="img1" src="loading.gif" /></td></tr>
<tr><td>3</td><td><img name="img2" src="loading.gif" /></td></tr>
<tr><td>4</td><td><img name="img3" src="loading.gif" /></td></tr>
</table>

<script type="text/javascript"><!--
var MAX_WIDTH = 440;
var bilder_src = new Array("http://www.wanderindex.de/images/berge2.jpg",
  "http://www.hameln.de/_images/102-auf-dem-berge-gross.jpg",
  "http://www.free-hintergrundbilder.de/bilder/natur/berge/berge-108.jpg",
  "http://gibtsnicht.de/gibtsdochgarnicht.gif");
var bilder = new Array();
function loadImages() {
  for (var i = 0; i < bilder_src.length; i++) {
    bilder[i] = new Image();
    bilder[i].src = bilder_src[i];
  }
}
function replaceImages() {
  var stillToLoad = new Array();
    for (var i = 0; i < bilder.length; i++) {
      if (bilder[i] != undefined && bilder[i].complete) {
        if (bilder[i].width > MAX_WIDTH) {
          document.images['img'+i].width = MAX_WIDTH;
          //document.images['img'+i].height = bilder[i].height * MAX_WIDTH / bilder[i].width;
        }
        if (bilder[i].width == 0) {
            document.images['img'+i].src = 'close.gif';
        } else {
            document.images['img'+i].src = bilder[i].src;
        }
      } else if (bilder[i] != undefined) {
        stillToLoad[i] = bilder[i];
      }
    }
  bilder = stillToLoad;
  if (stillToLoad.length > 0) {
      window.setTimeout('replaceImages();',300);
  }
}
loadImages();
replaceImages();
--></script>

  </body>
</html>

Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite

0 Mitglieder finden den Beitrag gut.

zitieren

Di. 19.02.2008 19:09 Uhr #15

Picard8888 Mitglied

Registriert seit
16.01.2008

Beiträge
21

Beitragswertungen

Klar bin ich interessiert. Danke für den Code.

Interessant ist die Zeile:
if (bilder[i] != undefined && bilder[i].complete)
mit diesem complete lässt sich sicherlich eine Menge anfangen.

Wenn ich es richtig verstanden hab arbeitet das Script alle Bilder nach id ab und gibt die geladenen Bilder aus und schreibt die anderen in var stillToLoad. Diese wird dann zeitverzögert einmal ausgeführt.
Falls die Ladezeit der Bilder diese Verzögerung übersteigt würden sie nichtmehr geändert (denke ich ).

Eventuell könnte man mit setInterval() das ganze mehrfach ausführen lassen. Wenn man dann den Zeitwert für setInterval z.B jedesmal verdoppelt(bis zu einer gewissen Grenze z.B 60 Sekunden), könnten sehr langsame Bilder immer noch abgearbeitet werden.
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Ilch Clan 1.1 » Fehlersuche und Probleme » Lange Ladezeit bei Bildern