使用get（）加载页面之前加载图像

Question

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

我用get。

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'));
}

随意为图片添加更多样式/定位，并将基本的show / hide方法替换为fadeIn / fadeOut，slideDown / { {3}}或slideUp如果您喜欢。

以下是other effects和loading GIF generator，以防您不想从Google图片中抓取一张。{/ p>

这是another预制的。{/ p>

Answer 2

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