페이지가 느리게로드되는 동안 로더 이미지를 표시하는 방법

내 페이지에서 db 쿼리를 사용하여 많은 양의 데이터를 시간에 가져 와서 페이지에 표시합니다. 참고하시기 바랍니다. 페이지 매김을 사용할 수 없습니다. 따라서 쿼리가 모든 데이터를 가져 와서 UI에 표시 할 때까지 로더 이미지를 표시하기 만하면됩니다. 나는 예를 들어,이 코드를 시도했다, 그러나 그것은페이지가 느리게로드되는 동안 로더 이미지를 표시하는 방법

<html> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(window).load(function() { 
     $(".loader").fadeOut("slow"); 
    }) 
    </script> 
    <style> 
     .loader { 
      position: fixed; 
      left: 0px; 
      top: 0px; 
      width: 100%; 
      height: 100%; 
      z-index: 9999; 
      background: url('processing.gif') 50% 50% no-repeat rgb(249,249,249); 
     } 
    </style> 
</head> 
<body> 
    <div id="page"> 
     <div class="loader"></div> 
     <cfquery datasource="dsn_spinlife_prod_new" name="qryGetProdList"> 
      SELECT * 
      FROM tbl_products; 
     </cfquery> 
    </div> 
</body> 
</html>

작동하지 않습니다하지만 그 페이지의 사림이 작업도 document.ready하지 시도하면서 여전히 파이어 폭스가 빈 페이지를 표시, 작동하지 않습니다. 로더 이미지를 표시하고 싶습니다. 어떻게 처리 할 수 있습니까? 뭔가 놓친 것 같습니다.

출처

2014-09-15 user3427540

느린 DB 작업이 완료 될 때까지 브라우저가 페이지를 가져 오지 않을 가능성이 가장 높습니다. 로더 div 후에 위의 스크립트에 <cfflush>을 넣으십시오. 그러면 CF가 그 시점까지 생성 된 모든 것을 브라우저로 돌려 보낼 것입니다.

<cfflush>을 호출하면 더 이상 쿠키를 설정하거나 리디렉션을 보낼 수 없으므로 나중에 코드에 없는지 확인하기 위해 코드를 검사해야합니다.

다른 방법은 그 안에 자리 아무것도하지만 페이지를 생성하고 별도의 요청으로 결과에로드 jQuery를 사용하는 것입니다 : results.cfm 쿼리를 실행하고 생성

<script> 
$('#results').load('results.cfm',function(){$('.loader').hide()}); 
</script> 
<div class="loader">Loading...</div> 
<div id="results"></div>

페이지를 완성하는 데 필요한 HTML.

출처

2014-09-15 08:28:20 barnyr

나는 단지 하나의 div로 갈 것입니다. 먼저 이미지를 넣은 다음 cfflush를 사용하십시오. 나머지 코드가 실행되면 javascript를 사용하여 div의 내용을 변경하십시오. –

페이지가 느리게로드되는 동안 로더 이미지를 표시하는 방법

답변

관련 문제