1。バックグラウンドの紹介
オンラインフォトアルバムアプリケーションでは、ユーザーが写真を表示する必要が最も高くなります。ネットワークが遅い場合、写真を表示するのに待ち望んでいる時間は比較的長く、ユーザーエクスペリエンスは非常に貧弱になります。
2。現在の状況
写真を読み込む主な方法は2つあります。
（1）IMGタグを使用してHTMLページに写真を直接読み込んで表示する最も独創的な方法。この方法には、ネットワークの速度が遅い場合、または表示する写真が比較的大きく、ユーザーエクスペリエンスが低下すると、空白の待機プロセスがあります。
（2）最初にIMGタグを使用して写真のサムネイルをロードしてHTMLページに写真を表示し、JavaScriptを使用して写真の元の画像を非表示にし、写真の大きな画像がロードされるまで、元の画像をページに表示するまで待ちます。以下はフローチャートです。
3。私たちの解決策
QQフォトアルバムによって最近作成された最適化方法のいくつかは、2つのアピール方法の欠点を解決し、ユーザーの写真を表示する必要のあるものを満たしています。写真の一般的な状況をできるだけ早く見て、できるだけ早く明確なオリジナル画像を見てください。この方法では、サムネイルと元の画像を使用して、同時に表示をロードしてオーバーレイします。まず、サムネイルをロードしてディスプレイを展開すると、大きな画像がサムネイルと荷重に同時に重ねられます。サムネイルは非常に小さく、通常、ユーザーはぼやけた画像をすばやく確認できます。大きな画像の荷重中に、サムネイルは徐々に上から下に覆われているため、ユーザーは読み込みプロセス中に大きな画像を見ることができます。
（1）図の例
上記のように、この方法の処理手順は次のとおりです。
1）。写真のサムネイルと元の画像のURLを取得し、写真の長さと幅を取得します。
2）。写真のサムネイルを積み込み、表示し、フィルムの長さと幅に応じてサムネイルを伸ばします。この時点で、ユーザーはぼやけた効果を見ます。
3）。元の写真を読み込んで表示し、元の画像をサムネイルに重ねて表示して表示します。元の画像は、ロードと同じくらい表示されます。ロードされていない場合でも、サムネイルが表示されます。サムネイルを徐々に上書きします。元の画像の読み込みプロセス中に、ユーザーは写真の勾配効果をBlurからclearに見ます。
4）。元の画像がロードされた後、元の画像はすべてサムネイルをオーバーライティングし、ユーザーは実際の元の画像を見ます。この時点で、サムネイルを隠して、サムネイルがPNGやGIFなどの透明な効果を備えた画像の表示を妨げるのを防ぐことができます。
（2）サンプルコード
<！ - 写真のサイズを設定します - > <div> <！ - 小さな画像は大きなサイズで表示されます - > <img src = "small_url"/> <！ - 元の写真は小さな画像に重ねられます - > <img src = "big_url"/> </div>
上記は、この記事のコンテンツ全体です。 JavaScriptの詳細については、「JavaScriptリファレンスチュートリアル」と「JavaScriptコードスタイルガイド」をご覧ください。また、誰もがwulin.comをもっとサポートすることを願っています。