非同期読み込みによるコンテンツのジャンプを回避するには
Web上でコンテンツを配信することは、年月を重ねるごとに、ますます複雑で重くなっています。サードパーティや外部Webサービスへの依存度が高まり、読み込み時間が長くなっています。 「クリックして待つ」という類推はユーザーにとって苛立たしいものであり、この問題を克服するために、非同期技術がWebに実装され、大きな成功を収めています。 Webリクエストの読み込み時間を短縮することは、重要な前進です。
最近、非同期の読み込みによってコンテンツがジャンプし、ユーザーが再びフォーカスを合わせ、場合によってはマウスクリックまたはタッチイベントを再び狙うことに気づきました。さらに悪いことに、フォーカスがビューポートから押し出されることがあり、混乱を招く可能性があります。
この問題に対処するには、ページがジャンプしないようにする必要があります。問題は、それをどのように最善を尽くすかです。古いリクエストレスポンス形式で表示する前に、ウェブページ全体をダウンロードしてダウンロードすることはできません。別の方法としては、非同期読み込みで最近入力される空白のあるWebページの構造を表示することですが、一見するとページは空に見え、ユーザーはなぜか疑問に思われるでしょう。
最初のレンダリングで空のWebページを表示せずに非同期フィードでコンテンツのジャンプを回避するにはどうすればよいですか？
使用中のテクノロジーがそれをサポートしていると仮定すると、改善されたエクスペリエンスは
そのソースからデータを取得したことがなく、サイズがわかっている場合は、プレースホルダー画像をレンダリングします。ソースごとに異なる彩度の低いアイコンを使用した、微妙な読み込みアニメーションgif。
そのソースからデータを取得したことがなく、サイズがわからない場合は、予想される最小サイズでプレースホルダーをレンダリングし、コンテンツの受信後に新しいサイズに拡張をアニメーション化します。
以前にこのソースからデータを取得したことがある場合は、ローカルストレージに配置されたデータのバージョンをレンダリングします（たとえば、以前のHTMLとデータを格納したり、そのコンポーネントの「スクリーンショット」を格納したりすることもできます）。新しいデータがサーバーから送信されると、表示が変わります。 「最後にリフレッシュされた」または「現在データが変更されている」ヒントが必要な場合があります。