페이지로드 중에 CSS 팝업을 열고 페이지로드가 완료되면 닫는 방법

로드하는 데 20-30 초가 걸리는 웹 페이지가 있습니다. 페이지로드가 끝나면 닫히는 팝업 ("Please wait ...")을 열 수 있습니까? 나는 다음을 시도했지만 효과가 없다. 페이지가 예상대로로드되지만 팝업은 표시되지 않습니다. 내 개발 플랫폼으로 Firefox를 사용하고 있습니다. 조건을 역전 (#container hidden/none 및 closePopup()이 visible/block으로 재설정 됨)하면 페이지가 로딩 될 때 팝업이 나타납니다. 두 번째 질문으로, 비록 이것이 작동하더라도, 브라우저에 크게 의존 할 것인가? 감사!페이지로드 중에 CSS 팝업을 열고 페이지로드가 완료되면 닫는 방법

<html><head><style> 
#container{ 
    width : 100%; 
    height : 100%; 
    top : 0; 
    position : absolute; 
    visibility : visible; 
    display: block; 
    background-color : rgba(22,22,22,0.5); 
} 
#popup{ 
    position : relative; 
    margin: 0 auto; 
    top: 35%; 
    width : 300px; 
    padding : 10px; 
    border : 1px solid black; 
    background : yellow; 
    box-shadow: 5px 5px 5px #252525; 
} 
</style> 
<script language="javascript"> 
    function closePopup(){ 
     document.getElementById('container').style.visibility = "hidden"; 
     document.getElementById('container').style.display = "none"; 
    } 
</script></head><body onload="closePopup();"> 
<div id="container"><div id="popup">Please Wait...</div></div> 
20 seconds worth of stuff happens here. 
</body></html>

출처

2016-08-05 JBH

이 방법은 작성된 방식으로 팝업이로드되기 전에 팝업을 닫는 스크립트를 실행합니다. 팝업을 닫는 스크립트는 head 태그에로드 된 다음 본문 태그의 첫 번째 속성으로 실행되지만 이후에는 본문에서 팝업에 내용을 입력하지 않았습니다. script 태그에 defer 속성을 사용하십시오. 그래서 팝업을 닫기위한 스크립트는 페이지가 파싱을 마칠 때까지 실행되지 않습니다. 마찬가지로 :

<script language="javascript" defer> 
function closePopup(){ 
    document.getElementById('container').style.visibility = "hidden"; 
    document.getElementById('container').style.display = "none"; 
} 
</script>

두 번째 질문에 대답하려면 defer 속성을 사용하면 거의 모든 최신 브라우저에서 작동합니다. Safari, Chrome, Firefox 3.6 이상, Opera 15.0 이상 및 Edge 10.0 이상

출처

2016-08-05 23:54:22 Boysenb3rry

W3에 따르면 지연 속성은

페이지로드 중에 CSS 팝업을 열고 페이지로드가 완료되면 닫는 방법

답변

관련 문제