Entwickler-Ecke

Wünsche, Anregungen & Kritik - Beitragssuche: Bilder abgeschnitten


Yogu - Do 08.07.10 20:21
Titel: Beitragssuche: Bilder abgeschnitten
Hallo,

ich habe gerade einen kleinen, relativ unwichtigen Fehler in der Beitragssuche gefunden (sonst tolle Neuerungen :zustimm:). Und zwar werden Bilder, zumindest eingebettete Anhänge, einfach abgeschnitten, ohne dass ein "Weiterlesen"-Link erscheint.

Beobachtet hab ich das in der Beitragssuche von user profile iconNarses [http://www.c-sharp-forum.de/search.php?search_author=Narses&show_results=posts]. Der Post im Thema Endlich! Die CD, auf die wir schon so lange gewartet haben! [http://www.c-sharp-forum.de/viewtopic.php?t=100417] enthält nur ein Bild und ein Smiley, und wird daher vom Server offenbar für nicht höher als 100 Pixel eingestuft.

Der Fehler ist klein, allerdings doch etwas nervig, da man die Suchergebnisse nun verlassen muss, um das Bild komplett anzusehen.

Grüße,
Yogu


Heiko - Do 08.07.10 21:28

Also bei mir ist er da vorhanden *grübel*


Christian S. - Do 08.07.10 21:33

Bei mir in Chrome sehe ich ihn auch nicht. Chrome zeigt Bilder, die noch geladen werden müssen, erst an, wenn der Rest der Seite schon zu sehen ist. Im FF ist das (gerade getestet) auch so. Ist das in Opera anders?

Eventuell wird daher in Chrome und FF die Höhe falsch bestimmt *spekulier* Dann müsste ich sehen, dass ich mir einen anderen Zeitpunkt suche, um die Links anzuzeigen, nämlich wenn das Bild fertig geladen hat.


Heiko - Do 08.07.10 21:40

user profile iconChristian S. hat folgendes geschrieben Zum zitierten Posting springen:
Eventuell wird daher in Chrome und FF die Höhe falsch bestimmt *spekulier* Dann müsste ich sehen, dass ich mir einen anderen Zeitpunkt suche, um die Links anzuzeigen, nämlich wenn das Bild fertig geladen hat.

Ich vermute mal, du machst es aktuell wenn der DOM ready ist, oder? Wenn ja: Bis dahin müssen die Bilder noch nicht geladen sein. Von daher kann der Fehler auftreten. Du könntest jetzt das Event abgreifen das kommt, wenn alles fertig geladen wird. Aber auf einer langsamen Leitung dürfte das stören, da man den Rest nicht verwenden kann, bevor die Bilder fertig sind. Von daher müsstest du ein zweistufiges System bauen. Beim DOMReady-Event die ersten Weiterlesen-Links hinzufügen und beim zweiten Event dann die restlichen Überprüfen, ob die evtl. doch noch einen Link brauchen. - Oder du nutzt statt Weiterlesen... einen automatischen Scrollbalken, dann ist es Sache des Browsers :P


Yogu - Do 08.07.10 21:52

user profile iconHeiko hat folgendes geschrieben Zum zitierten Posting springen:
Ich vermute mal, du machst es aktuell wenn der DOM ready ist, oder?

Die Abfrage findet jeweils statt, wenn ein Post geladen wurde, sie ist in HTML integriert.

Abhilfe verschaffen könnten vielleicht die width- und height-Attribute. Wenn die Ausmaße aller Bilder dem Parser bekannt wäre, könnte er diese Attribute setzen, und auch Firefox und Chrome hätten sofort einen Platzhalter der richtigen Größe.

user profile iconHeiko hat folgendes geschrieben Zum zitierten Posting springen:
Du könntest jetzt das Event abgreifen das kommt, wenn alles fertig geladen wird.

Alternativ wäre auch das onload-Ereignis der Bilder möglich. Das wird dann ausgelöst, wenn das Bild vollständig geladen ist. In der Funktion showExpander könnten erst alle Bilder mit Event-Handlern ausgestattet werden, die einen Zähler rückwärtszählen und bei Null die Höhe prüfen. So wäre keine Anpassung des Parses nötig und der Inhalt müsste nicht komplett geladen sein, bevor die Links ausgeblendet werden.

Hier ein ungetesteter Code:


JavaScript-Quelltext:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
function showExpander(id) {
  var postBody = document.getElementById('postBody'+id);
  var expander = document.getElementById('expander'+id);
  if (postBody && expander) {
    // Anzahl der noch zu ladenden Bilder
    var counter = 0;
    
    // Gibt an, ob showExpander schon verlassen wurde
    var ready = false;
    
    // Stattet alle img-Tags mit Event-Handlern aus
    function crawl(node) {
      if (node.nodeName.toLower() == 'img') {
        counter++;
        node.onload = function() {
          // Möglicherweise ist das Bild geladen, bevor showExpander verlassen
          // wurde
          var func = function() {
            if (!ready) {
              setTimeout(func, 100);
              return;
            }
            
            // Wenn kein Bild mehr geladen werden muss, kann Höhe gestestet werden
            counter--;
            if (counter == 0)
              doShowExpander(id);
          }
          func();
        }
      }
      
      for (var i = 0; i < node.childNodes.length; i++) {
        crawl(node.childNodes[i]);
      }
    }
    
    if (counter == 0)
      doShowExpander(id);
    ready = true;
  }
}

function doShowExpander(id) {
  if (postBody.scrollHeight > 100) {
    if(postBody.scrollHeight < 110)
      postBody.style.maxHeight = "";
    else
      expander.style.display = "";
  }
}


UGrohne - So 11.07.10 20:12

Ich hab das nicht nur bei den Bildern, sondern auch bei anderen Beiträgen gerade gesehen. Hab mir dann mal mit Firebug das Ganze angeschaut und festgestellt, dass das Weiterlesen-Div über das Display:none-Attribute versteckt ist. Wenn man das Attribut entfernt, wird der Link eingeblendet, an der Höhe kanns also nicht liegen.


Yogu - Mo 12.07.10 00:07

user profile iconUGrohne hat folgendes geschrieben Zum zitierten Posting springen:
Das Weiterlesen-Div [ist] über das Display:none-Attribute versteckt [...]. Wenn man das Attribut entfernt, wird der Link eingeblendet, an der Höhe kanns also nicht liegen.

Doch, denn der Link wird per JavaScript eingeblendet, sofern die Höhe einen bestimmten Wert überschreitet:


JavaScript
1:
2:
3:
4:
5:
6:
7:
8:
9:
function showExpander(id)
{
  if (postBody.scrollHeight > 100) {
    if(postBody.scrollHeight < 110)
      postBody.style.maxHeight = "";
    else
      expander.style.display = "";
  }
}

user profile iconUGrohne hat folgendes geschrieben Zum zitierten Posting springen:
Ich hab das nicht nur bei den Bildern, sondern auch bei anderen Beiträgen gerade gesehen.

Was für Beiträge denn zum Beispiel?


UGrohne - Mo 12.07.10 08:34

user profile iconYogu hat folgendes geschrieben Zum zitierten Posting springen:
user profile iconUGrohne hat folgendes geschrieben Zum zitierten Posting springen:
Das Weiterlesen-Div [ist] über das Display:none-Attribute versteckt [...]. Wenn man das Attribut entfernt, wird der Link eingeblendet, an der Höhe kanns also nicht liegen.

Doch, denn der Link wird per JavaScript eingeblendet, sofern die Höhe einen bestimmten Wert überschreitet:

Ah, ok. Hab nicht das Ganze JS angeschaut.

user profile iconYogu hat folgendes geschrieben Zum zitierten Posting springen:
user profile iconUGrohne hat folgendes geschrieben Zum zitierten Posting springen:
Ich hab das nicht nur bei den Bildern, sondern auch bei anderen Beiträgen gerade gesehen.

Was für Beiträge denn zum Beispiel?

Beiträge, die Du nicht siehst ;). Christian sieht diese auch über den angesprochenenden Suchlink, darin sind keine Bilder enthalten.


Chiller_No.1 - Mo 12.07.10 14:55

Ich hab mir grad mal einen Beitrag angesehen der "bedankt" wurde und da trat das Problem auch auf das der Beitrag einfach abgeschnitten wird. Wusste jetzt nicht ob das auch schon bekannt war :P

mfg chiller