How to load image with jquery?

Question

Im doing this to load image and show image inside a dialog box.

<div id="image_preview" title="Client Photo Preview">
   <p><img src="" alt="client image" id="client_image_preview" /></p>
</div>

$("#client_image_preview").attr("src", imagelocation);

$('#image_preview').dialog({
    height: 'auto',
    width: 'auto',
    modal: true,
    dialogClass: 'titleless',
    buttons: { "CLOSE": function() { $(this).dialog("destroy"); } }
});

is there way to show a loading gif while image loads with jquery?

Regards

Answer 1

Set an initial loading gif image in your img tag. Then preload the image using a javascript Image object and onload event; when the target image is done preloading, replace the src of your img tag with its URI.

<div id="image_preview" title="Client Photo Preview">
   <p><img src="loading.gif" alt="client image" id="client_image_preview" /></p>
</div>

var img = new Image();
img.onload = function() {
    $("#client_image_preview").attr("src", imagelocation);
}
img.src = imagelocation;

$('#image_preview').dialog({
    height: 'auto',
    width: 'auto',
    modal: true,
    dialogClass: 'titleless',
    buttons: { "CLOSE": function() { $(this).dialog("destroy"); } }
});