Ankündigung

Einklappen
Keine Ankündigung bisher.

10011: Gut geladen ist halb gewonnen oder Anzeige gegen Unbekannt

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 10011: Gut geladen ist halb gewonnen oder Anzeige gegen Unbekannt

    10011:
    Es existiert mittlerweile Vielzahl an JavaScript-Anwendungen im Web. Eine sehr bekannte ist z.B. die Server-Kundenverwaltungssoftware Plesk, aber auch Epesi, das wir schon am 1000. bei den Projektmanagement-Tools vorgestellt haben.
    Alle haben dabei eines gemeinsam, nämlich eine Ladeanzeige. Diese sperrt die Seite solange, (bei Plesk) oder blendet zumindest einen Layer in der Mitte der Seite ein (Epesi) bis die Seite vollkommen geladen wurde. Ein vollkommen unnötiges Feature, das die Arbeit nur erschwert und den Benutzer frustriert. Wenigstens bei Plesk kann man es abschalten.
    Doch nun zur Problematik: viele Jung-JavaScriptler wollen diese Funktion nachbauen und sie tun es meist genauso falsch, wie die Entwickler der oben genannten Tools es gemacht haben.
    Aber weshalb nun dieser Artikel? Er soll nicht die Vor- oder Nachteile erörtern und auch nicht davon abbringen, dieses „Feature“ zu implementieren, er soll einfach nur zeigen, wie man es machen sollte, wenn man es machte.

    Der Fehler:
    Die einfachste Lösung ist diese:
    Code:
    // Layer einblenden
    
    window.onload = function() {
        // Layer ausblenden
    };
    Das ist aber definitiv nicht der richtige Weg!
    Warum?
    Das load-Event wartet, bis wirklich alle Elemente der Seite geladen wurden, das schließt auch Bilder und Fremdinhalte ein. Wenn jetzt also besonders große Grafiken auf der Seite vorhanden sind oder Inhalte von einem fremden Server eingebunden werden, der derzeit etwas schwach auf der Brust ist, wartet der Benutzer sich tot bis das Timeout zuschlägt oder die Grafik doch noch vollständig geladen wurde.
    Dieser Weg ist also definitiv der Falsche!

    Die Lösung:
    Es gibt ein weiteres Event, das sich DOMContentLoaded nennt. Dieses ist aus vielen JavaScript-Frameworks gut bekannt, wie z.B. jQuery:
    Code:
    $(document).ready(function() {
        // …
    });
    Es ist also ganz einfach, das load-Event durch das ready-Event zu ersetzen.
    Doch was ist, wenn man kein JavaScript-Framework einsetzt?
    DOMContentLoaded existiert in dieser Form nur in Mozilla-Browsern, doch soll der Layer auch in anderen Browsern angezeigt werden.
    Code:
    // Layer einblenden
    
    window.addEventListener('DOMContentLoaded', function() {
        // Layer ausblenden
    }, null);
    würde also z.B. nicht im IE funktionieren.
    Möglich ist eine Crossbrowser-Kompatibilität aber dennoch, immerhin schaffen die JavaScript-Frameworks das auch. Um herauszufinden wie, kann man einen Blick in den Quellcodes des Frameworks werfen, allerings ist der Code meist weitestgehend unkommentiert.
    Es hat sich aber mal jemand die Mühe gemacht, und ein Tutorial zu diesem Thema zu schreiben, welches hier zu finden ist: Are you ready for this

    Mit diesem Code gerüstet, kann man sein Vorhaben nun ganz einfach verwirklichen:
    Code:
    // Layer einblenden
    
    registerOnLoad(function() {
        // Layer ausblenden
    });

    Links zum Thema:

  • #2
    Schöne Quellen. Aber puh, dafür braucht man die ein oder andere ruhige Minute...

    Wichtig ist auch zu erwähnen, dass die guten .ready Implementierung additiv sind, also alte (vorher gesetzte) document.ready Aktionen nicht überschreiben, sondern ergänzen.

    Wie das für onLoad geht (zum Vergleich), ist Teil dieses Tutorials.
    [COLOR="#F5F5FF"]--[/COLOR]
    [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
    [COLOR="#F5F5FF"]
    --[/COLOR]

    Kommentar


    • #3
      Schöner Artikel, aber als wirklich sinnvoll sehe ich diese Ladegrafiken in der Form nicht. Die benutze ich nur wenn ich AJAX-Aktionen ausführe und warte bis ich die Antwort erhalte, allein um den Usern zu zeigen das da noch etwas passiert... Für die die es noch nicht kennen: Ajaxload - Ajax loading gif generator

      Kommentar


      • #4
        Jap schließe mich hier Cycap an. Wenn ein Ajax Request ausgeführt wird kann ruhig eine Grafik kommen, aber nicht wenn man irgendne Seite aufruft. Das stört nur. Ganz besonders bei der Serverkonfiguration mit Plesk...
        [B]Mfg Tomtaz[/B]
        [I]"Es soll jetzt diese Erfindung geben.... Kugel oder so heißt die. Ist so eine Art Suchmaschine..." [/I]:!::shock:

        Kommentar


        • #5
          Ausserdem hab ich nen Browser der mir sagt das er noch am Laden ist, sogar mir Ladegrafik

          Kommentar


          • #6
            Zitat von cycap Beitrag anzeigen
            Ausserdem hab ich nen Browser der mir sagt das er noch am Laden ist, sogar mir Ladegrafik
            Jop, das was mich am allermeisten Stört ist die Tatsache, dass wenn dann so ein Bild kommt von wegen Seite noch nicht fertiggeladen, und dann klickt man zurück... Das Bilchen bleibt... Gerade wieder bei Plesk aufgefallen
            [B]Mfg Tomtaz[/B]
            [I]"Es soll jetzt diese Erfindung geben.... Kugel oder so heißt die. Ist so eine Art Suchmaschine..." [/I]:!::shock:

            Kommentar


            • #7
              Das Bilchen bleibt... Gerade wieder bei Plesk aufgefallen
              Dann schalte es doch aus, so mache ich das auch immer.
              Ich finde Ladegraphiken auch nervig, aber wenn schon, dann auch richtig wie hier beschrieben.
              Refining Linux: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

              Kommentar

              Lädt...
              X