실제 신체 하중이 오기 전에 이미지 로딩을 어떻게 보이나요?

내 웹 페이지의 본문을 숨기고 싶습니다. 일단 웹 페이지의 body 태그의 모든 내용을 표시 할 준비가되면 본문을 표시하고 싶지만 그 시간까지 일부 로딩 이미지를 표시하고 싶습니다.실제 신체 하중이 오기 전에 이미지 로딩을 어떻게 보이나요?

신체의 내용이 제대로로드되지 않으면 오류 메시지가 표시됩니다.

자바 스크립트에서 이것을 수행하는 가장 좋은 방법은 무엇입니까?

출처

2009-12-07 Anurag

여기에 지침이 있습니까? 아니면 어딘가에 질문이 있습니까? – helloandre

영어를 더 잘 만들려고 노력했지만, 의미를 변경하면 문제를 해결할 수 있습니까? –

사실 아주 간단합니다. onload 기능이 실행되면 페이지 전체에 div 전체 화면을 배치하고 숨길 수 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     #loading-overlay { 
      position: absolute; 
      z-index: 1000; 
      height: 100%; 
      width: 100%; 
      left: 0; 
      top: 0; 
      background-color: #003366; 
      color: white; 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <div id="loading-overlay">This is a loading screen</div> 

    <p>The page has loaded!</p> 

    <!-- The following is to slow down the page load so that the effect can be observed --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=10"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1232"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12341"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123459"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234568"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12345677"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567863"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567891"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script type="text/javascript">   
     $(function() { 
      $("#loading-overlay").hide(); 
     }); 
    </script> 
</body> 
</html>

출처

2009-12-07 10:21:00

머리 앞에 div와 css를 둘 수 있습니까? 왜냐하면 나는 css와 자바 스크립트를 가지고 있기 때문에 body 태그의 div가 읽히도록 순서대로로드되어야합니다. – Borsn

유효한 HTML이 아닙니다. –

실제 신체 하중이 오기 전에 이미지 로딩을 어떻게 보이나요?

답변

관련 문제