IE6: Javascript kommt zu spät/langsam, wer hilft beim optimieren? Einstellungen

[monkderhonk]

Hallo Leute,

ich bin gerade dabei ein Projekt abzuschließen. Fast alles steht soweit, nur leider kommt der IE6 mal wieder in die Quere.
Wenn ihr euch mal diese Seite (noch nicht öffentlich, nicht weitersagen! http://www.chavakis.de/index.php?idcatside...&detailid=2 ) im IE6 anschaut fallen euch sicher die Probleme auf, vor denen ich stehe.
Es ruckelt wie wild. Das liegt wohl daran, dass die Grafiken zu lange brauchen, alles aufhalten und per JS zuviel am DOM gewerkelt wird.
Vor allem die Navi wird per DOM-Scripting umgemodelt.
Ich setzte die std. Navi

Ordner1
seite1
seite2
Ordner2
Ordner3

um in:
<div>
Ordner1
Ordner2
Ordner3
</div>
<div>
seite1
seite2
</div>

Es wäre echt nett, wenn mir der ein oder andere Tipps bzgl Code-Verbesserungen geben könnte. Vielleicht kann ich auch was an der Listen-Navi schrauben, dass das so kommt wie gewünscht!
Als JS-Lib setz ich JQuery ein.

lg, monk

[andi]

also ich weiss nicht. bei mir ist in ie6 nix langsamer?!?

[monkderhonk]

hi andi,

wirklich nicht? bei mir sieht man beim "durchblättern" immer erst kurz die "rohe" navi, bevor diese dann per skript in die richtige form gebracht wird...
muss dazu sagen, dass ich bei mir ein standalone ie hab, neben einem ie7. vielleicht ist das noch langsamer...
trotzdem: mein kunde hat sich darüber beklagt, bei ihm wars also auch fürn §$%&... (sorry, ie-frust ;-) )

hast du dir mal mein skript angeschaut? irgendwas verwerfliches? (außer das viele auskommentierte?)

lg, monk

[gunwalt]

Bei FF 3 gibt es einen ähnlichen Effekt (allgemein, ohne obiges Beispiel). Die Inhalte der Seiten sind schneller da, als das die Seite gerendert ist. Das betrifft nicht eine graphische Navigation, sondern die gesamte Seite

[mvsxyz]

Hallo Monk,

ich kann die Beobachtung von dir bestätigen. In meinem IE6 springt die Navigation auch. Zudem habe ich es noch im IE 7 ausprobiert und auch da gibt es Probleme.

Ich vermute, dass das document.ready im IE später ausgeführt wird, als in den anderen Browsern. Deshalb habe ich ein bisschen recherchiert und folgende Artikel gefunden:

Allgemeines zu document.ready()

Dein Problem betreffend 1
Dein Problem betreffend 2

Generelles zur Geschwindigkeit -> dort auf Javascript

[mvsxyz]

Noch ein anderer Gedanke: Warum fügst du nicht 2 Navigationsmodule untereinander ein, dass dir die gewünschte Struktur erzeugt.

<div>
Ordner1
Ordner2
Ordner3
</div>
<div>
seite1
seite2
</div>

Das erste gibt dir nur die Ordner aus und das zweite nur die Seiten. Sollte doch gehen, oder?

Der Beitrag wurde von mvsxyz bearbeitet: Tue. 9. September 2008, 18:35

[monkderhonk]

das ist ne super idee. dafür bekommst du imaginäre high five!!

ich würd trotzdem gerne diesen thread dazu nutzen etwas über js-feinheiten zu lernen. was macht man oft falsch, was verbraucht viel rechenzeit? ich weiß zB, dass meine derzeitige Lösung über die Navi-Elemente zu iterieren nicht der Weißheit letzter Schluss ist (Stichwort dom-zugriff).
also, wo sind die js/jquery heads?

edit: uups, hab mvsxyz´s 1. beitrag übersehen.

übrigens: klickt auch mal auf das bild, dann müsste eigentlich eine Großansicht kommen. Funktioniert das bei euch?

bin dankbar für jeden input

lg, monk

Der Beitrag wurde von monkderhonk bearbeitet: Tue. 9. September 2008, 18:47

[monkderhonk]

danke, mvsxyz. werd mal die tage deine links nachrecherchieren!

@gunwalt: was meinst du genau damit? etwa, dass das dom erst geladen wird und dann die bilder etc?

Der Beitrag wurde von monkderhonk bearbeitet: Tue. 9. September 2008, 18:51

[mvsxyz]

High five zurück.

Damit du dein Studium noch etwas vertiefen kannst, habe ich noch ein paar Links zum Thema Performance von jQuery rausgesucht:

Some quick tips for jQuery performance

jQuery: Performance analysis of selectors

Interaktiver Performance-Vergleich von mehreren JS-Bibliotheken (leider schon etwas veraltete Versionen)

Der Beitrag wurde von mvsxyz bearbeitet: Tue. 9. September 2008, 19:16

[Olaf]

Also ich finde den ganzen Ansatz der da verfolgt wurde einen Irrweg. Schaut es euch mal mit JS Off an

Wozu hat es da für jedes Bild eine Seite (oder Pseudoseite)? Dadurch hast du dir erst den ganzen Mist eingehandelt (reload)!
Imho brauchst du doch nur die Bilder links mit den großen Bildern selbst zu verlinken, dann bissel Manipulation und die in den rechten Block reinzaubern

[monkderhonk]

die zweifel hatte ich auch, ich war nur von den features des galerie-moduls überzeugt. hat alles was ich brauche. zB der walker zum wechseln der bilder (mit nummerierung) wäre für mich sonst (nur mit js) schwer zu realisieren gewesen.
Oder was wäre dein vorschlag? dazu brauchst du doch auch wieder js?

[Olaf]

Oder was wäre dein vorschlag? dazu brauchst du doch auch wieder js?

Klar, spricht nichts gegen JS, aber wie du hast bekommt der User ohne die Bilder nicht zu sehen, das ist der Nachteil.
Mein Vorschlag wäre dieser Richtung:

QUELLTEXT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
  <style type="text/css">
  <!--
  *{
  margin:0;
  padding:0;
  }
  ul{
  width:80px;
  }
  ul li{
  float:left;
  list-style:none;
  margin:5px;
  }
  #main{
  border:1px solid #cccccc;
  float:right;
  height:600px;
  margin:5px;
  width:860px;
  }
  -->
  </style>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  // <!--
   //
$(function() {
  $("#thumb-list a").click( function (){
    $href = $(this).attr("href");
    $("#main img").remove();
    $("#main").append("<img src='"+$href+"'>");
  return false
  });
});
  // -->
  </script>
</head>
<body>
<div id="main">
      <img src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_10_Gross.jpg" border="0" alt="thumbnail" />
</div>
<ul id="thumb-list"><li>
  <a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_10_Gross.jpg">
    <img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_10_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
<li>
  <a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_1_Gross.jpg">
    <img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_1_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
<li>
  <a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_2_Gross.jpg">
    <img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_2_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
<li>
  <a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_3_Gross.jpg">
    <img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_3_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
</ul>
</body>
</html>

[monkderhonk]

Hi Olaf,

das würde natürlich gehen und hätte sicherlich den vorteil, dass nicht für jedes bild eine neue seite geladen werden müsste.
nur, wie zB würdest du den Walker, also die Nummernanzeige, bauen? das war mir zu dem zeitpunkt, als ich mich dann fürs galerie-modul entschieden hatte zu umständlich und der Zeitaufwand nicht zu rechtfertigen, da alle nötigen Features im besagten Modul bereits enthalten sind. Außerdem sollte es mit vernünftigem Caching ja flott gehen.

Dass man das Bild ohne js nicht sieht, ist schlecht, das stimmt. Das werde ich aber umstellen können, den wert nicht in css setzen, sondern erst bei dom-ready verstecken...

Hat vielleicht noch jemand eine gute Idee, wie man die Großansicht, also die Anzeige, die erscheint, wenn man auf das Bild klickt, verbessern kann? Bis jetzt hab ich das per Cookie realisiert und dom-scripting, dass je nach cookie-wert einzelne Objekte im Baum löscht bzw verschiebt.

lg und danke fürs mitdenken,
monk

[Olaf]

nur, wie zB würdest du den Walker, also die Nummernanzeige, bauen? das war mir zu dem zeitpunkt, als ich mich dann fürs galerie-modul entschieden hatte zu umständlich und der Zeitaufwand nicht zu rechtfertigen....

Das dauert auch nich lang:

QUELLTEXT

  $("#thumb-list a").each( function(i){
    $(this).clone().empty().text(i+1).prependTo("#main")
    .click( function(){
      $href = $(this).attr("href");
      $("#main img").remove();
      $("#main").append("<img src='"+$href+"'>");
    return false
    });
  });

Das ist natürlich nur hingerotzt

Zur Großansicht, da müsstest du dir das append der ersten Funktion noch mal anschauen und anpassen, dann suchst du nach livequery und bindest diese Großansicht damit an den erzeugten Code. Aber nun gut, ich will nicht deine Arbeit machen

[monkderhonk]

wow, das hats in sich. muss ein armer jquery padavan erst mal drüber nachgrübeln.

jetzt fällt mir aber auch wieder das killerargument pro galeriemodul ein: direkte links zu jedem foto. bekommst du das per javascript auch hin?

[Olaf]

jetzt fällt mir aber auch wieder das killerargument pro galeriemodul ein: direkte links zu jedem foto. bekommst du das per javascript auch hin?

Jetzt hast du aber was ganz falsch verstanden. Das muss schon das Modul tun, also du erzeugst die Thumbs mit den Links mit der Galerie und setzt darauf dies Verhalten mit JQuery drauf.