javascript - 加载 XML 时显示加载指示

Question

我有一个网页，可以将数据从 XML 文件加载到 DIV。在此示例中，我的 DIV 具有以下属性:class="Group"；这也是我的 JS 代码:

$(document).ready(function () {
    $.get(Root + "/Feed_Products/Groups", {}, function (xml) {
        var output = '';
        $('item', xml).each(function (i) {
            var Name = $(this).find("Name").text();
            var Id = $(this).find("Id").text();

            var Link = Root + '/Group' + Id;

            output += '<a href="' + Link + '">' + Name + '</a>';
        });
        $(".Group").append(output);
    });
});

如您所知，加载 XML 有延迟，并且不如直接数据库请求快。

如何在每个正在加载 XML 的 DIV 上显示小型加载 GIF？

图片:/image/BPWcg.png

Answer 1

$(document).ready(function () {
    $(".Group").addClass("loading");
    $.get(Root + "/Feed_Products/Groups", {}, function (xml) {

        var output = '';
        $('item', xml).each(function (i) {
            var Name = $(this).find("Name").text();
            var Id = $(this).find("Id").text();

            var Link = Root + '/Group' + Id;

            output += '<a href="' + Link + '">' + Name + '</a>';
        });
        $(".Group").append(output).removeClass("loading");

    });
});

然后在你的CSS中定义:

.Group.loading{
   background-image: url("yourGIF.gif");
   /* other rules */
}