只加载一次图像动画

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

只加载一次图像动画

Loading Image Animation only once

javascript

kendo-ui

kendo-chart

FIDDLE

已更新FIDDLE