仅加载一次图像动画答案

【问题标题】：Loading Image Animation only once仅加载一次图像动画
【发布时间】：2015-06-11 14:13:38
【问题描述】：

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

 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

【问题讨论】：

如果您的意思是第一次在会话中，您可以使用 sessionStorage 变量并在显示动画之前检查它是否已设置：developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
@Ezanker，是的，我想使用sessionStorage 变量，但是由于我在theDataSource 中定义了时间变量，sessionStorage 如何在我当前的实现中出现？

标签： javascript kendo-ui kendo-chart

【解决方案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

【讨论】：