Загрузка анимации изображения только один раз

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.

Сохраните переменную sessionStorage в requestEnd, а также проверьте ее перед отображением анимации загрузки:

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