I have an image gallery which fetches its images (image links) from a remote JSON files, generates the thumbnail of each image (because the one that comes from JSON is way too small), and finally dumps it out to the user. While it does that, the user has no idea of what's going on. Until all of the thumbnails are generated, they see a blank "white" page.
How would I go about implementing the gallery in such a way that when the user opens the gallery, they can see that the image is being loaded (via a "loading" spinner gif), and as soon as a thumbnail is generated, it immediately replaces the spinner and sits in its place without waiting for the others to load.
Here's a visual example of what I'm trying to accomplish. Note: This may or may not be NSFW. Please take caution.
On the site (the link you gave), JSON-answer is the html code in the json-view, like:
..<li><a href='...'><img src="link-to-thumb"/></a></li>
<li><a href='...'><img src="link-to-thumb"/></a></li>
<li><a href='...'><img src="link-to-thumb"/></a></li>...
When json-answer came javascript add this code to the end of block. The images have backgorund-image - "loading" spinner gif. When images loaded its view overrides the background. Thumbnails generated one time: at the first load, and is stored in the thumbnail-folder. Next time if an image was not changed and the thumbnail was not deleted - load the thumbnail without generate it