[FIXED] How do I add loading indicator to an <img>?

Issue

I have the following HTML in my project.

<div class="container" id="crop">
    <img id="timage" src="http://example.com/color/style/etc/" alt="timages" />

I also have the following javascript:

$(window).load(function () {
$("#slider").change(function update() {
    sVal = $(this).val();
    if (sVal == 2) {
            $('#timage').prop('src',"http://example.com/" +
            tForm +
            "color.blahblah" + 
            itemCode + 
            "therest_ofthe_URL");}

    sVal = $(this).val();
    if (sVal == 3) {
            $('#timage').prop('src',"http://example.com/" +
            tForm +
            "color.blahblah" + 
            itemCode + 
            "therest_ofthe_URL");}
            );}

It works splendidly to replace the image with the string when the slider value reaches certain numbers. The problem is, the image is being created on the back end behind the scenes and takes quite some time before it is ready. In the meantime, you are just staring at the original image wondering if the slider did anything.

How do I add a loading indicator to let people know that the image is about to change?

Solution

First, place a loading indicator where you want it. You could replace #timage with a spinning gif, for example. Then use this code to start the new image loading:

var img = new Image();
img.onload = function () {
    $('#timage').prop('src', img.src);
}
img.src = '/image/to/load/here';

The function will be executed when your new image has been retrieved from the server and loaded. Since it's already cached on the client, it should load instantly once the src for #timage is set.

Answered By - amiller27

Answer Checked By - Timothy Miller (PHPFixing Admin)