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

随意为图像添加更多样式/定位并替换基本的 show/hide使用 fadeIn 的方法/fadeOut , slideDown / slideUp 或 other effects如果你喜欢的话。

这是一个 loading GIF generator和 another如果您不想从 Google 图片中获取一张。

这是一个 nice collection预制的。