Progressive Enhancement, Verhalten, wenn die Seiten sind noch nicht vollständig geladen

Question

Ich entwickle Websites progressive Erweiterung vollständig in jQuery realisiert.

Zum Beispiel, ich bin das Hinzufügen Onclick-Ereignishandler dynamisch Tags zu verankern verknüpft MP3-Dateien "inline" zu spielen, mit Soundmanager und Aufspringen Youtube Spieler für Links Youtube, über $ (document) .ready (function ()).

Wenn jedoch der Benutzer auf sie klickt, während die Seite geladen wird, bekommen sie immer noch die nicht-erweiterte Version.

Ich habe darüber nachgedacht, die relevanten Sachen versteckt (via display: none oder so ähnlich). Und es zeigt, wenn geladen wird, oder einen modalen „Laden“ Dialog setzen, aber beide klingen wie Hacks

Jede bessere Ideen? Ich glaube, ich bin etwas fehlt ganz offensichtlich hier.

Grüße,

Alex

Answer 1

Ich habe nicht getestet, aber man könnte versuchen live . Das Denken ist, dass Sie Ihren Click-Handler außerhalb von document.ready setzen könnten, so dass sie sofort ausgeführt werden soll. Da live verwendet Veranstaltung Delegation es ist Funktionalität zu erreichen, müssen Sie nicht wirklich warten müssen, für das DOM bereit zu sein, und alle Klicks, die vorgenommen werden, während die Seite geladen ist, sollte nach wie vor von den Event-Handler erfaßt werden.

Wenn das nicht funktioniert, könnten Sie versuchen, die Javascript-Skript-Tags setzen direkt unter, was auch immer sie binden müssen. Es ist nicht schön, aber es wird so ziemlich das Problem beseitigen.

Answer 2

Angenommen, Sie ein gutes Urteilsvermögen verwendet haben und die Menschen für die nicht-erweiterte Version fallen, nur weil die Verzögerung zu lang ist, dann würde ich verwenden CSS, die Kontrollen zu deaktivieren . Die CSS wird fast sofort laden. Dann mit Javascript Ich würde die CSS wechseln, so werden die Kontrollen wieder aktiviert.

Allerdings ist meine erste Reaktion ist, dass, wenn der Benutzer darauf klicken kann, während die Seite geladen wird, dann wird Ihrer Seite oder die Verbindung ist zu langsam. Wenn dies jedoch selten der Fall ist - weniger als 1% der Zeit - dann können Sie es abschütteln, solange der Benutzer sein Ziel zu erreichen, das heißt seine Musik hören. Ich das sagen, weil, sobald die Benutzer erkennen, dass eine bessere Erfahrung später eine halbe Sekunde erwartet, wird er in der Regel warten, Javascript zu machen und klicken Sie dann auf.

Answer 3

Ich nehme die entgegengesetzte Haltung von aleemb in Bezug auf die Verwendung von CSS. Wenn Sie CSS verwenden, um die Kontrollen zu deaktivieren, dann alle, die Javascript deaktiviert hat oder Zugänglichkeit Software verwendet wird nicht in der Lage, diese Kontrollen zu verwenden, ohne Ihren Stylesheet vollständig zu deaktivieren.

Sie können eine sehr kleine Inline-Javascript direkt vor dem schließenden Body-Tag verwenden Sie die Elemente über js wirklich schnell zu verstecken. Wenn es inline ist und keine externen Ressourcen zu laden, wird es sehr schnell, in der Regel schneller als ein Benutzer klicken kann.

Allerdings I tun mit aleemb einig, dass, wenn Ihre Benutzer in der Lage sind, mental die Seite zu verarbeiten und an die Steuerung machen sie vor Ihrem js klicken möchten geladen wird, gibt es wahrscheinlich ein tiefer liegendes Problem mit die Art und Weise Ihrer Seite geladen wird. Schauen Sie in Möglichkeiten, die Ladezeit zu verringern. Bilddateien komprimiert, Gzipping HTML / CSS / JS-Dateien, minify Ihr Javascript, kombinieren Bilder in Sprites, etc

Answer 4

Ich würde vorschlagen, folgende Paolo Bergantino der Beratung -. Veranstaltung Delegation ist der Weg zu gehen, um das Problem vollständig zu vermeiden

Ich hatte ein ähnliches Problem, bei dem Ereignisse Delegation nicht die Arbeit machen könnte - man kann lesen dass hier über.