CODEWITHSUNDEEP
javascriptcssangular
user6728767
user6728767

Reputation: 1243

Slow scrolling when images load

I have an image manager that shows a fixed sized grid of images. The thumbnails are relatively small already so I can't really make them smaller. I implemented lazy loading and using a debounce function to check if the images on in the visible region. This increased the speed of launching my image manager. However, if I scroll while the new batch of images are being loaded, the scrolling becomes very slow. Is there anyway around this or to further optimize loading images?

EDIT:

Is there a way to prevent scrolling while a new batch of images are coming in? Kind of like how Youtube just keeps bouncing when we try to scroll to see more comments while they are still being loaded?

Upvotes: 0

Views: 1989

Answers (2)

user6728767
user6728767

Reputation: 1243

It turns out the slow scrolling was due to me calling getBoundingClientRect() to find new visible images while there were some images still being loaded. That caused a reflow which bogged everything down.

I changed it to load images in batches so that getBoundingClientRect() isnt called when there are images being loaded.

Upvotes: 0

NBaua
NBaua

Reputation: 684

Try not to load all the images at once (which I guess you've implemented with Lazy loading), I'm aware that the users online have a high tendency to scroll fast.

I would suggest, few things here: First

  1. Implementing the Lazy loading in a correct way is essential. here is a list of few best techniques, make sure which works best for you.
  2. You've mentioned, that the thumbnails are relatively small, however I assume only specifying smaller dimensions is not sufficient, I hope you have covered this ground, Else maintain two folder one for Actual images and another for Thumbnails on your hosting server.
  3. Even though we take utmost care, users upload tons of heavy images on our server, if that is the case, you need to resize the images on client end and then upload on the server, one copy in Actual images and another for Thumbnails
  4. If you are talking about product images, keep the PNGs, Why, because they are far better then BMPs and JPGs. Also you can compress them with online tools like https://tinypng.com/ OR with softwares like https://pngquant.org/

Hope this helps resolve your issue, coz it did to resolve mine.

--N Baua

Upvotes: 1

Related Questions