多くの画像をロードする jquery プラグインをプログラミングしています。
最初はぼやけていて、完全にロードされている場合は完全に表示することをお勧めします。
フェイスブックが良い例です。
この技術はどのように機能しますか?
多くの画像をロードする jquery プラグインをプログラミングしています。
最初はぼやけていて、完全にロードされている場合は完全に表示することをお勧めします。
フェイスブックが良い例です。
この技術はどのように機能しますか?
これは、画像が保存される形式によって異なります。
JPG画像は通常、上から下に読み込まれます(したがって表示されます)。ただし、プログレッシブ(インターレースとも呼ばれる)形式で保存されている場合は、画像全体が粗い形式で読み込まれ、徐々に品質が向上します。Facebookは画像をプログレッシブ形式で保存します。
最初の形式から2番目の形式に変換するために利用できるユーティリティがあります。よく知られているもの(ImageMagick)へのリンクは次のとおりです:ImageMagick
2 つの画像があります。1 つは低品質で、もう 1 つは高品質です。画像を表示したい場合は、最初に image.src を低品質の画像に設定し、次にすぐに適切な画像パスに設定します (遅延が 0 の setTimeout も機能します)。
ブラウザは完全に読み込まれるまで img タグの画像を置き換えないため、機能します。品質の悪い画像は、良い画像よりもはるかに高速に読み込まれるため、ユーザーは、読み込み時にぼやけた画像と完全に読み込まれた画像を最初に見ることになります。
例
img.src = 'path/to/fuzzyImage.jpg';
setTimeout(function() {
img.src = 'path/to/fullImage.jpg';
}, 0);
通常のアプローチでは、画像のサムネイル バージョンの幅と高さを大きな画像のフル サイズに設定し、大きな画像が読み込まれたときにサムネイルをフル イメージに置き換えます。サムネイル画像にフルサイズを設定すると、ブラウザによって大きなサイズに補間されるため、「あいまい」になります。