javascript - 仅加载图像动画一次

Question

我有以下实现，它功能齐全。我只需要第一次显示加载动画图像，我当前的实现它一直显示加载动画。

 var theDataSource = new kendo.data.DataSource({
        transport: {
             read: function (op) {
                 setTimeout(function () {
                     op.success(data);
                 }, 4000);
             }
        },
        group: {
            field: "series"
        },
        sort: {
             field: "category",
             dir: "asc"
         },
         requestStart: function () {
            kendo.ui.progress($("#loading"), true);
          },
         requestEnd: function () {
              kendo.ui.progress($("#loading"), false);
         }
});

<强> FIDDLE

Answer 1

将时间设置为默认为延迟时间 (4000) 的变量。然后检查您的 sessionStorage 变量以查看我们是否已经运行。如果是这样，请将时间设置为 0。

在 requestEnd 上保存 sessionStorage 变量，并在显示加载动画之前检查它:

var time = 4000;
var HasRun  = sessionStorage.getItem('HasRun');
if (HasRun){
    time = 0;
}
var theDataSource = new kendo.data.DataSource({
    transport: {
         read: function (op) {
             setTimeout(function () {
                 op.success(data);
             }, time);
         }
    },
    group: {
        field: "series"
    },
    sort: {
        field: "category",
        dir: "asc"
    },
    requestStart: function () {
        if (!HasRun){
            kendo.ui.progress($("#loading"), true);
        }
    },
    requestEnd: function () {
        kendo.ui.progress($("#loading"), false);
        sessionStorage.setItem('HasRun', true);
    }
});

更新 FIDDLE