画像の読み込みが遅いときにスクロールする

Question

画像の固定サイズのグリッドを表示する画像マネージャがあります。サムネイルは既に比較的小さいので、実際に縮小することはできません。遅延ロードを実装し、デバウンス機能を使用して可視領域の画像を確認しました。これにより、イメージマネージャの起動速度が向上しました。しかし、画像の新しいバッチがロードされている間にスクロールすると、スクロールが非常に遅くなります。とにかくこれを回避するか、画像の読み込みをさらに最適化することはありますか？

EDIT：

は、画像の新しいバッチが入って来ている間、スクロールを防止する方法はありますか？ Youtubeがまだ読み込まれている間にもっと多くのコメントを表示するためにスクロールしようとすると、Youtubeがどのようにバウンスするかのようなものでしょうか？

Answer 1

すべての画像を一度に読み込まないようにしてください（レイジーローディングを実装していると思います）。オンラインのユーザーがスクロールする傾向が高いことがわかりました。

私は、ここにいくつかのことを示唆している：不可欠であり、正しい方法で遅延ロードを実装 まず

1. を。 here is a list of few best techniques, make sure which works best for you。あなたはしかし、私は小さい寸法を指定すると仮定し、サムネイルが比較的小規模であることを、言及した
2. が十分ではなく、私は実際の画像と別のための2つのフォルダ1を維持しそうでなければ、あなたがこの地をカバーしている願っていますあなたのホスティングサーバー上のサムネイル
3. 私たちはサーバーに大量の重い画像をアップロードしますが、その場合はクライアント側の画像のサイズを変更してからサーバにアップロードしてください。もう1つはサムネイル
4. あなたが製品イメージについて話しているのであれば、BNGやJPGよりはるかに優れているので、PNGはそのままにしておいてください。また、あなたはhttps://tinypng.com/のようなオンラインツールとOR、これはそれが地雷を解決するためにやっただって、あなたの問題を解決するのに役立ちますhttps://pngquant.org/

希望のようなソフトウェアでそれらを圧縮することができます。

--N Baua

Answer 2

それはまだロードされている一部の画像があった一方で、新たな可視画像を見つけるために）遅いスクロールがgetBoundingClientRectを（呼び出して、私のためであったが判明しました。それが原因でリフローが起こり、すべてが疲れてしまった。

イメージがロードされているときにgetBoundingClientRect（）が呼び出されないようにイメージをバッチでロードするように変更しました。