If I had to load a lot of images, I would go about it like this:
- Add image dimensions as CSS to IMG-tags so the site will not jump around
- Add a loading animation until a (degraded quality) image can be displayed
- Deliver images with interlacing
- Only load pictures which are currently in the viewport or might be in the viewport soon
- Use the least possible resolution which still looks good (you do not need a high resolution on a smartphone screen, except you want to make use of the browser VR features)
- Apply all the usual image optimization techniques
Expert level:
- Concentrate on one image at a time when downloading. First download the first degraded-quality chunk for every image, then load the next one. It should be possible with websockets and a server which delivers the specific chunks. On the client side, you might have to use the CANVAS-tag. It is the most work, but this technique might deliver the best UX (worth a FOSS project, I'd say)