プレースホルダドミナントカラーで画像をレイジーに読み込む

Question

niice.coがレイジーローディングを使用して画像をロードする方法について、何かお伝えしたいと思います。

スクロールするときにウェブサイトからわかるように、画像を遅延ロードする前に、画像が配置されているdivの背景が実際に画像の支配的な色です。

私は周りを見て、http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/のようないくつかのプラグインを見つけましたが、それらがどのように2つをマージしているのかわかりません。

Answer 1

動作しません。読み込み中は画像を利用できません。あなたはバックエンドの色をチェックすることができます。次に：dbに色を保存し、データ属性としてヘックスを出力し、javascriptのバックグラウンドとして、または要素スタイルで直接使用します。または別の解決方法：色が保存されていない場合は、適応バックグラウンドライブラリを使用します。次に、バックエンドAPIを呼び出して16進数を保存します。次のリクエストで、javascriptまたは要素スタイルのヘックスを使用できます。

編集：ハウツーリンクについて おかげで経験的：https://manu.ninja/dominant-colors-for-lazy-loading-images

つ以上のパフォーマンスティップ：一度にすべての画像をロードしません。要求を分割するのがより良いUXです。 1行に4枚の画像がある場合は、最初の4枚の画像を読み込みます。それらが破損している場合：2行目などを読み込みます。もう一つ重要なこと：小さなプロファイル画像など（stackoverflowなど）にコンテンツ画像がロードされている間にこの画像は読み込まれません。訪問者の焦点は最も重要なポイントです。