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

У меня есть следующая реализация, она работает и работает. Однако я хотел бы добавить анимацию загрузки с настройкой 4 секунды.

requestStart: function () {
 kendo.ui.progress($("#loading"), true);
},
requestEnd: function () {
  kendo.ui.progress($("#loading"), false);
}

ТЕКУЩАЯ РЕАЛИЗАЦИЯ

Я наткнулся на следующую скрипту, однако не смог найти способ заставить ее работать.


javascript kendo-ui kendo-chart
person casillas    schedule 10.06.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Нужно задержать чтение данных на 4 секунды:

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

Обновлен DEMO

person ezanker    schedule 10.06.2015
comment
Большое спасибо, Эзанкер, интересно, как мне реализовать такую ​​же анимацию загрузки, как показано ниже dojo.telerik.com/IQeVU - person casillas; 11.06.2015
comment
@AndreaBanderas Изображение из класса k-loading-image. В вашей скрипке это исходит из темы kendo.material.min.css, которую вы выбрали. Вы можете переопределить фоновое изображение и получить то, что вам нравится, из темы по умолчанию. - person ezanker; 11.06.2015
comment
@AndreaBanderas вы можете найти изображение по умолчанию здесь: cdn.kendostatic.com/ 2015.1.429/styles/Default/loading.gif - person ezanker; 11.06.2015
comment
Большое спасибо, Эзанкер. Я очень ценю вашу помощь. - person casillas; 11.06.2015
comment
Я знаю, что мне нужно показать загрузку анимационного изображения в первый раз, когда я инициализирую данные; однако как я могу добиться постоянства, чтобы не показывать анимацию загрузки каждый раз? - person casillas; 11.06.2015
comment
@AndreaBanderas может установить для логического значения значение true при первой загрузке и проверить его при последующих загрузках. Трудно сказать, так как я не знаю вашей конкретной ситуации. - person ezanker; 11.06.2015