전체 페이지가로드되기 전에 어떻게 jquery 대화 상자를 표시합니까?

내 사이트에서 많은 작업을 완료하는 데 시간이 오래 걸릴 수 있습니다.전체 페이지가로드되기 전에 어떻게 jquery 대화 상자를 표시합니까?

페이지를로드하는 데 시간이 걸린다는 것을 알고있는 경우 페이지가로드되는 동안 진행률 표시기를 표시하고 싶습니다.

$("#dialog").show("progress.php");

과 (완료 수술 후 사라)로드되는 페이지의 상단에 그 오버레이가 있습니다

이상적으로는의 라인을 따라 뭔가 말을하고 싶습니다.

진행률 표시 줄을 코딩하고 진행 상황을 표시하는 데 문제가없는 경우 페이지로드 중 진행 상황 표시기가 표시됩니다. 나는 이것을 위해 JQuery의 대화 상자를 사용하려고 시도했지만 페이지가 이미로드 된 후에 만 나타납니다.

이 문제는 공통적으로 발생하지만 가장 좋은 방법은 JavaScript에 익숙하지 않습니다.

다음은이 문제를 설명하기위한 간단한 예입니다. 아래 코드는 20 초의 일시 중지가 끝나기 전에 대화 상자를 표시하지 않습니다. Chrome과 Firefox에서 사용해 보았습니다. 실제로 "Please Wait ..."텍스트도 표시되지 않습니다. 나는 생략

<html> 
    <head> 
    </head> 
    <body> 
    <div id="please-wait"></div> 
    <script type="text/javascript"> 
     // Use your favourite dialog plugin here. 
     $("#please-wait").dialog(); 
    </script> 
    .... 
    </body> 
</html>

참고 :

<html> 
    <head> 
     <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script> 

    </head> 
    <body> 
    <div id="please-wait">My Dialog</div> 
    <script type="text/javascript"> 
     $("#please-wait").dialog(); 
    </script> 
    <?php 
    flush(); 
    echo "Waiting..."; 
    sleep(20); 
    ?> 
    </body> 
</html>

출처

2009-03-26 Oleg Barshay

당신은 즉시 < body> 태그, 뭔가 같은 후 코드의 조각을 실행해야합니다 : 여기

내가 사용하고있는 코드입니다 전통적인 $ (function() {})은 전체 DOM이로드 된 후에가 아니라 페이지가 표시되면 바로로드해야하기 때문에 필요합니다.

페이지를 아직로드하지 않은 경우에도 이전에 해본 결과 잘 작동합니다.

편집 : 당신이 사용하고있는 jQuery를 대화 플러그인 전에 전체 DOM로드로드 확신해야합니다. 일반적으로 그렇지 않은 경우, 작동하지 않습니다. 이 경우 Lightbox 1 또는 Lightbox 2과 같은 g'old plain JavaScript 솔루션을 사용해야합니다.

출처

2009-03-26 22:33:37 Seb

+1 좋은 답변입니다. 그것을 두들겨 줘 :) 참고 :이 코드가 실행되기 전에 jQuery 스크립트를로드해야한다. (분명히) –

맞다. jquery.js 파일이 로컬에 캐싱 된 후에도 밀리 초 만에 문제가 발생합니다. – Seb

잘 작동하는 것으로 보입니다. 그러나 Chrome과 Apache를 통해 Firefox를 로컬로 시도하면 대화 상자가 팝업되지 않습니다. 페이지가로드되기 전에 위의 원래 질문에 샘플 코드를 게시합니다. –

전체 페이지가로드되기 전에 어떻게 jquery 대화 상자를 표시합니까?

답변

관련 문제