Question

I have this script to load some images after page loading is complete I want to know how I can show a loader text or small gif icon while images are loading.

$(function () {
        $(".product-image-holder").each(function () {
            $(this).attr('src', $(this).attr("alt"));
        });
});

Answer 1

You have to show / hide the loader yourself.

For each image a different loader

$(".product-image-holder").each(function () {
        $(this).bind("load", function(){
            // Hide loader code here for this image
        });
        // Show loader code here for this image
        $(this).attr('src', $(this).attr("alt"));
    });

1 loader for all images

// Show your loader here
var totalToLoad = $(".product-image-holder").length;
var loaded = 0;
$(".product-image-holder").each(function () {
        $(this).bind("load", function(){
            loaded++;
            if(loaded == totalToLoad)
            {
                // Hide your loader here
            }
        });
        $(this).attr('src', $(this).attr("alt"));
    });