84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
最初はぼやけて表示されますが、画面の表示範囲内に入ると高画質で表示されます。
最初に前処理済みの低画素画像を読み込んでから、高精細画像を表示するのでしょうか？
それとも別の方法なのでしょうか？
私の理解では、最初に小さな画像をロードし、次にcss3フィルターを使用してぼかし、大きな画像がロードされた後、srcを置き換えます。
フィルター:blur(10px)、読み込み完了フィルター:blur(0)
Zhihu はキャンバスを使用して、Medium などの小さな画像をぼかし、読み込み後に大きな画像を削除します。ファジーアルゴリズムを制御できるのが利点ですが、比較的重いのが欠点です。
ブラウザのデフォルトの小さい画像をぼかす方法を使用して遷移しました https://blog.crimx.com/2016/1...。利点は比較的軽く互換性が高いことですが、小さい画像事前にぼかしておく必要があります。そうすることでのみ、より良い結果が得られます。 CSS ブラーは互換性に関係なく使用できます。
原理は上記とほぼ同じです。ここで、自分で使用できる vue コンポーネントも作成しましたvue-img-loader
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私の理解では、最初に小さな画像をロードし、次にcss3フィルターを使用してぼかし、大きな画像がロードされた後、srcを置き換えます。
詳しくはこちらの記事をご覧ください http://www.jackpu.com/medium-...フィルター:blur(10px)、読み込み完了フィルター:blur(0)
Zhihu はキャンバスを使用して、Medium などの小さな画像をぼかし、読み込み後に大きな画像を削除します。ファジーアルゴリズムを制御できるのが利点ですが、比較的重いのが欠点です。
ブラウザのデフォルトの小さい画像をぼかす方法を使用して遷移しました https://blog.crimx.com/2016/1...。利点は比較的軽く互換性が高いことですが、小さい画像事前にぼかしておく必要があります。そうすることでのみ、より良い結果が得られます。 CSS ブラーは互換性に関係なく使用できます。
原理は上記とほぼ同じです。ここで、自分で使用できる vue コンポーネントも作成しました
vue-img-loader