큰 녹아웃 객체를 매핑 할 때 UI 잠금

Question

나는 약간의 비트를 가지고 있지만 문제점은 녹아웃 매핑에 있다고 생각합니다.

큰 스프레드 시트 (4000 줄)를 보내 서버 측 유효성을 검사하여 녹아웃 매핑에 대한 호출로 다시 4000 개체를 보냅니다.

매핑을 클릭하면 페이지의 모든 gif (아약스 로더)가 몇 초 동안 멈 춥니 다 (매핑이 완료 될 때까지). 마침내 돌아 오면 반환 된 모든 객체가 표시되고 전체 프로세스가 예상대로 작동합니다.

일시 중지는 마치 충돌처럼 보입니다. 제작시 스프레드 시트가 더 커질 수 있으므로 실제로 반응적으로 보이기를 원합니다.

내가 그 gif 회전을 유지할 수있는 방법을 아는 사람이 있습니까? 감사합니다

public csvToWebAPIObject(file, onFinished, onError) { 

     var formData = new FormData(); 
     formData.append("upload", file); 

     var url = this.getFullURL(); 
     $.ajax({ 
      url: url, 
      data: formData, 
      processData: false, 
      contentType: false, 
      type: 'POST', 
      success: (data) => { 
       var mapped = ko.mapping.fromJS(data); 
       onFinished(mapped); 
      }, 
      error: function (err, ajaxOptions, thrownError) { 
       if (onError != null) { 
        onError(err.responseText); 
       } 
      } 
     }); 
    } 

Answer 1

엄청난 양의 데이터를 DOM으로 처리하지 않았습니다. 지연은 실제로 데이터를 페이지로 렌더링함으로써 발생합니다. 불행히도 이렇게하는 가장 빠른 방법은 서버 측에서 데이터를 처리하고 완성 된 페이지를 반환하는 것입니다.

녹아웃을 사용해야하는 경우 페이징 시스템을 조사 할 수 있습니까? 한 번에 100 행 정도만 렌더링하는 것이 좋습니다. 당신은 당신의 코드에서 당신은 '로드'를 .gif의를 적용하고 다음

자바 스크립트

this.items = ko.observableArray(dataFromTheServer); 
this.currentPage = ko.observable(0); 
this.pageSize = ko.observable(100); 
this.visibleItems = ko.computed(function(){ 
    return self.items.splice(self.currentPage() * self.pageSize(), self.pageSize()*self.currentPage() + self.pageSize()); //Returns 0 - 100, or 101 -> 200, etc  
}); 

HTML

<!-- do visibleItems instead of items --> 
<div data-bind="foreach: visibleItems"> 
    //render items 
</div>