javascript - 在使用 get() 加载页面之前加载图像

Question

如何在加载过程中显示 gif 图像？

我用得到。

function getCurrentUrl() {
    $(
        $.get(
            "page1.html", 
            function (data) {
                $("#divReceptLoad").empty().append(data);
            },
           'html'
        )
    );
}

如果你能帮助我，比你非常多:)

Answer 1

然后创建一个<img id="loading" src="..." style="display:none;" />：

function getCurrentUrl() {
    $('#loading').show(); //show it before sending the ajax request
    $.get("page1.html", function (data) { 
        $('#loading').hide(); //hide in the callback
        $("#divReceptLoad").empty().append(data);
    },'html'));
}

随意为图像添加更多样式/定位，并将基本的 / 方法替换为/ showfadeOuthide或fadeIn其他效果slideDown（如果slideUp你喜欢的话）。

这是一个加载 GIF 生成器和另一个，以防您不想从 Google 图片中获取一个。

这是一个很好的预制的集合。

Answer 2

function getCurrentUrl() {
     $('#gif').fadeIn() // show the hidden gif
     $.get("page1.html", function(data){
        $('#gif').hide() // hide it
        $("#divReceptLoad").empty().append(data);
     },'html')    
}