JavaScript - Zhihu に画像をロードする原理は何ですか?

Question

最初はぼやけて表示されますが、画面の表示範囲内に入ると高画質で表示されます。

最初に前処理済みの低画素画像を読み込んでから、高精細画像を表示するのでしょうか？

それとも別の方法なのでしょうか？

Answer 1

私の理解では、最初に小さな画像をロードし、次にcss3フィルターを使用してぼかし、大きな画像がロードされた後、srcを置き換えます。

詳しくはこちらの記事をご覧ください http://www.jackpu.com/medium-...

Answer 2

フィルター:blur(10px)、読み込み完了フィルター:blur(0)

Answer 3

Zhihu はキャンバスを使用して、Medium などの小さな画像をぼかし、読み込み後に大きな画像を削除します。ファジーアルゴリズムを制御できるのが利点ですが、比較的重いのが欠点です。

ブラウザのデフォルトの小さい画像をぼかす方法を使用して遷移しました https://blog.crimx.com/2016/1...。利点は比較的軽く互換性が高いことですが、小さい画像事前にぼかしておく必要があります。そうすることでのみ、より良い結果が得られます。 CSS ブラーは互換性に関係なく使用できます。

Answer 4

原理は上記とほぼ同じです。ここで、自分で使用できる vue コンポーネントも作成しました
vue-img-loader