プログレッシブエンハンス、ページがまだ完全にロードされていない場合の動作

Question

プログレッシブエンハンスメントを使用してサイトを開発していますが、これはjQueryで完全に実装されています。

たとえば、SoundManagerを使用してリンクされたMP3ファイルを再生し、Youtubeリンクのために$（document）.ready（function（））をポップアップさせるためにonclickイベントハンドラを動的に追加します。

ただし、ページの読み込み中にユーザーがクリックすると、非拡張バージョンが表示されます。

私は、関連するものを隠していないことについて考えてきました（ディスプレイを介して：なし、またはそのような何かを）し、ロードされたときにそれを示すか、モーダル「読み込み」ダイアログが、ハッキングのような両方の音を置きます。

もっと良いアイデアですか？私はここで完全に明白な何かを見逃していると感じている。

よろしく、

アレックス

Answer 1

私はこれを試していませんが、liveを試すことができます。考えているのは、クリックハンドラをdocument.readyの外に置いてすぐに実行できるようにすることです。 liveはevent delegationを使用して機能を実現するため、DOMの準備が完了するのを待つ必要はなく、ページがロードされている間に行われたクリックは、イベントハンドラによって取り込まれる必要があります。

これでうまくいかない場合は、バインドする必要があるもののすぐ下にJavascriptスクリプトタグを置いてみてください。それはかなりではありませんが、問題をほとんどなくします。

Answer 2

あなたが適切な判断を使用していると仮定すると、人々は、遅延が長すぎる、私はコントロールを無効にするCSSを使用しているという理由だけで非拡張バージョンのために下落しています。 CSSはすぐに読み込まれます。その後、Javascriptを使用してCSSを切り替えると、コントロールが再度有効になります。

しかし、私の最初の反応は、ページのロード中に、ユーザーがそれをクリックすることができれば、その後、ページまたは接続が遅すぎるということです。しかし、これがまれにしかない場合（時間の1％未満）、ユーザが目標を達成できれば、それは彼の音楽を聴くことができます。なぜなら、ユーザーは一度、より良い経験が0.5秒待っていることを理解すれば、彼は通常、Javascriptがレンダリングされ、次にクリックされるのを待つからです。

Answer 3

CSSの使用に関して、私はaleembとは逆の立場を取っています。 CSSを使用してコントロールを無効にすると、JavaScriptが無効になっているかアクセシビリティソフトウェアを使用しているユーザーは、スタイルシートを完全に無効にしないとそのコントロールを使用できなくなります。

body bodyタグの直前で非常に小さなインラインJavaScriptを使用して、js経由で要素をすばやく非表示にすることができます。インラインで、外部リソースを読み込む必要がない場合は、非常に高速になります。通常、ユーザーがクリックできるよりも高速です。

しかし、私はは、ユーザーが精神的にページを処理して、彼らはあなたのjsがロードされる前にクリックするコントロールにそれを作ることができれば、おそらく方法あなたのページとより深い問題があることをaleembに同意しません読み込み中です。読み込み時間を短縮する方法を調べてください：イメージファイルの圧縮、html/css/jsファイルのgzipping、JavaScriptの縮小、画像のスプライトへの結合など。

Answer 4

私は、Paolo Bergantino's adviseに従うことをお勧めします。イベント委任は、問題を完全に回避する方法です。

私はイベントの委任が仕事を行うことができなかった同様の問題を抱えていました。あなたはread about that hereです。