我必须在移动浏览器上显示1000多个未分类的图片缩略图，但我不知道如何

Question

Everything I try falls short when testing on a mobile. Loading times are unacceptably long, scrolling is jerky, etc. Thumbnails I'm working with are 120px wide. I understand this is not a specific question but I'd like to hear how would you approach this kind of problem?

Answer 1

I can think of three approaches

1. the classic way: use pagination, display only 10/20/50.. thumbnails per page
2. the modern (complex) way: add images when the user is scrolling, remove images from the DOM when they leave the visible area (best known example: the google picture search)
3. the clumsy way: splice the images together on the server, serve them as cluster of for example 3 x 5 thumbs

Answer 2

I would suggest you not to make all the thumbnails load at once. You can load 50 or hundred thumbnails when the page loads first and load remaining if they click on load more. Or you can organize them into pages

Loading at once makes your web page size more than an MB which will obviously take a lot of time to load