I’m building a gallery from scratch that is rendered completely with Javascript/JQuery.
The gallery consists of ~70 photos. The gallery UI will just be previous and next buttons (no thumbnails).
In terms of performance (reduced load times), what is the best-practices way to load the images?
Here are the different techniques I’m considering:
-
On page load, just load the first image, and preload the rest.
-
When the user clicks the “next” button to request an image, use JS to create and append the image tag.
I guess I’d probably load the current image, and 1 or 2 previous/next images. Then each time the next/previous buttons are clicked, load another image a couple placed ahead.
This way you get a good user experience, and also reduce potential download.