jquery로 검색 한 매우 큰 HTML 내용의 로더

Jquery에서 검색 한 데이터 블록이 많습니다. 양식을 제출할 때 div에 로더를 추가 한 다음 데이터가 반환되면 데이터의 HTML 태그로 대체됩니다. 문제는 데이터가 반환되고 로더가 사라지고 브라우저가 html을 렌더링하기 위해 렌더링하는 동안 약 4 초 동안 빈 div가 표시되는 것입니다. 어쨌든 데이터가 브라우저에 표시 될 때까지 로더를 유지할 수 있습니까?jquery로 검색 한 매우 큰 HTML 내용의 로더

$("#offerForm").submit(function() { 
    //show loader 
      $('#demo').append('<div id="zloader" style="background: #fff url(\'preloader2.gif\') no-repeat scroll 10px center; 
padding-left: 40px;">Loading, please wait...</div>'); 

    //post the form 
     $.post('getoffers.php', $("#offerForm").serialize() 
+ '&page=' + page, function(data) { 

         //show the returned data 
       $('#demo').html(data.htmlOutput); 
        } 
    }

출처

2012-02-08 user1038814

$.post('<url>', {<data>}, function (data) { 
    $('#demo').append(data.htmlOutput).find('#zloader').remove(); 
});

이 새로운 데이터를 추가 한 후 로더를 제거합니다.

출처

2012-02-08 22:22:52 Jasper

전체 HTML을로드 한 후 로더를 삭제하도록하십시오. 작동 시키려면 약간 까다로울 수 있습니다.

기본적으로 브라우저 "다시 그리기"와 관련이 있습니다. JavaScript 프로그래머는 컨트롤이 없습니다. 이상의 경우 다시 칠하기가 수행되거나 수행되지 않습니다.

당신이 다시 칠하는 브라우저의 시간을 제공하는 사이에 setTimeout 및 고정 취소 와 비트에 의해 내용 비트를로드하려고 할 수 동결 방지하기 위해.

출처

2012-02-08 22:21:39 Halcyon

답을 모두 주셔서 감사합니다. Frits, 솔루션을 구현하기 위해 참조 할 수있는 자습서가 있습니까? 감사합니다 – user1038814

나는 어떤 것도 모른다, 그러나 쓰기가 아주 어렵지 않아야한다. Jasper의 솔루션이 도움이 될 수 있습니다. 이 아무것도 변경하지 않도록 – Halcyon

ajax 방법을 사용하여 수행 할 수 있습니다. 당신이 HTML(), $ 아약스의 기본 구현을 사용하는 경우

$.ajax({ 
    url: 'get-offers.php', 
    type: 'POST', 
    beforeSend: function() { 
     // append the loader 
    }, 
    success: function(data) { 
     // show the returned data 
    } 
});

출처

2012-02-08 22:21:40

'.load' 물 아래 AJAX 호출입니다. – Halcyon

, 당신은 완료에로드 된 내용에 표시를 변경하고 로더를 제거하기 위해 콜백에 액세스 할 수 있습니다.

예컨대 :

$.ajax{ 
... 
success:function(){ 
    // Show new content 
    // Hide loader 
}}

출처

2012-02-08 22:22:09 htmldrum

jquery로 검색 한 매우 큰 HTML 내용의 로더

답변

관련 문제