Ajax loader image before actual image loads

Question

My image hotel taking bit while as its trying to load large size image. How can I set an Ajax Loader GIF image before the actual image loads to make my users understand to wait. Thanks.

$(document).ready(function () {
    window.showim = function(src) {
        $("#imgLoader").attr("src", src);
    };
});

JSFiddle: http://jsfiddle.net/52dY7/

Answer 1

The simpliest way is to start with a loader image in the source of the targeted image.

<img id="imgLoader" src="path/to/your/loader.gif" />

Look here... http://jsfiddle.net/xflofoxx/52dY7/2/

Answer 2

$(document).ready(function () {
    $('img').each(function() {
        var $img = $(this),
            origSrc = $img.attr('src');

        $img.attr('src', '/path/to/loader/image');

        $('<img />').on('load', function() {
            $img.attr('src', origSrc);
        }).attr('src', origSrc);
    });
});