Question

我有这个脚本在页面加载完成后加载一些图像我想知道如何在加载图像时显示加载器文本或小的gif图标。

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

Answer 1

您必须自己显示/隐藏装载程序。

为每张图片添加不同的

$(".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个加载器

// 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"));
    });

Answer 2

相当直接

注意 - （如果<img class='.product-image-holder' />有一些父HTML标记说<div><img class='.product-image-holder' /></div>，则答案有效

$(function () {
        $(".product-image-holder").each(function () {
            $(this).attr('src', $(this).attr("alt"));
            $(this).parent().load("http://example.com/any-other-image.jpg");
        });
});

加载宽图像时显示小装载机图标

2 个答案: