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？

图片：http://i.stack.imgur.com/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 */
}

在加载XML时显示加载指示

1 个答案: