Single Page Apps and Images

At Second Street we have a lot of user generated content. When you combine that with a single paged JS application you can run into issues when you add <img src="http://yourImage" /> into the DOM before the image has loaded.

If the image is large or the network request is slow the user may see a broken image or shell of an image while they wait for the image to load.

Broken or unresponsive images make for a bad experience, especially when the current task is based solely around uploading and utilizing a image.

Wait for the Image to Load

Instead of instantly adding a <img> to the page you can use jQuery to first load it and then add it.

$("#yourImage").load(function() {
    //show image on page

Or Use Background Image for Loading Status

If you don't want to wait for all your images to load you can use this trick that uses a background loading image. When the image is loaded by the browser it will cover up the loading image.

JS Bin

JS Bin