jQuery で完全に実装されたプログレッシブ エンハンスメントを使用してサイトを開発しています。
たとえば、onclick イベント ハンドラーをアンカー タグに動的に追加して、SoundManager を使用してリンクされた MP3 ファイルを「インライン」で再生し、$(document).ready(function()) を介して YouTube リンクの Youtube プレーヤーをポップアップします。
ただし、ページの読み込み中にユーザーがそれらをクリックすると、拡張されていないバージョンが表示されます。
関連するものを (display: none などを介して) 非表示にし、ロード時に表示するか、モーダルな「ロード」ダイアログを配置することを考えましたが、どちらもハックのように聞こえます。
より良いアイデアはありますか？ここで完全に明らかな何かが欠けているように感じます。
よろしく、
アレックス
私はこれをテストしていませんが、試すことができますlive。クリック ハンドラーを document.ready の外に配置して、すぐに実行できるようにすることが考えられます。liveはイベント委任を使用してその機能を実現するため、DOM の準備が整うまで待つ必要はありません。ページの読み込み中に行われたクリックは、引き続きイベント ハンドラーによってキャプチャされます。
それがうまくいかない場合は、バインドする必要があるもののすぐ下に Javascript スクリプト タグを配置してみてください。きれいではありませんが、問題はほとんど解消されます。
あなたが適切な判断を下し、遅延が長すぎるという理由だけで人々が拡張されていないバージョンに落ちていると仮定すると、私はCSS を使用してコントロールを無効にします。CSS はすぐに読み込まれます。次に、JavaScript を使用して CSS を切り替え、コントロールが再度有効になるようにします。
ただし、私の最初の反応は、ページの読み込み中にユーザーがクリックできる場合、ページまたは接続が遅すぎるということです。ただし、これがめったにない場合 (1% 未満の場合) は、ユーザーが自分の音楽を聴くという目標を達成できる限り、気にする必要はありません。私がこれを言うのは、0.5 秒後にはより良いエクスペリエンスが待っていることにユーザーが気付くと、通常は Javascript がレンダリングされるのを待ってからクリックするからです。
CSS の使用に関して、私は aleemb とは反対のスタンスを取っています。css を使用してコントロールを無効にすると、JavaScript が無効になっているユーザーやアクセシビリティ ソフトウェアを使用しているユーザーは、スタイルシートを完全に無効にしない限り、これらのコントロールを使用できなくなります。
body タグの直前に非常に小さなインライン JavaScript を使用して、js を介して要素をすばやく非表示にすることができます。インラインであり、外部リソースをロードする必要がない場合、非常に高速であり、通常はユーザーがクリックするよりも高速です。
ただし、 js が読み込まれる前に、ユーザーがページを精神的に処理して、クリックしたいコントロールに移動できる場合は、ページの読み込み方法に深刻な問題がある可能性があるという aleemb に同意します。読み込み時間を短縮する方法を検討してください: 画像ファイルの圧縮、html/css/js ファイルの gzip 圧縮、JavaScript の縮小、画像をスプライトに結合するなど。
Paolo Bergantino のアドバイスに従うことをお勧めします。イベントの委任は、問題を完全に回避する方法です。
イベントの委任が機能しないという同様の問題がありました。これについては、こちらを参照してください。