-1

지금 당장은 다음 코드 조각을 온라인에서 찾았습니다. 회색 레이어 오버레이 앞에 div 레이어를 표시 할 수 있도록 수정해야합니다.로딩 클래스 앞에 레이어를 표시하는 방법

body onload 함수가이 경우 div 레이어를 표시 할 수 있습니까? 여기 행동이 코드 조각을 볼 수 https://jsfiddle.net/t9tmzws4/

html { 
 
    -webkit-transition: background-color 1s; 
 
    transition: background-color 1s; 
 
} 
 

 
html, 
 
body { 
 
    min-height: 100%; 
 
} 
 

 
html.loading { 
 
    background: #333 url('http://www.airfares.ga/icons/238.gif') no-repeat 50% 200px; 
 
    -webkit-transition: background-color 0; 
 
    transition: background-color 0; 
 
} 
 

 
body { 
 
    -webkit-transition: opacity 1s ease-in; 
 
    transition: opacity 1s ease-in; 
 
} 
 

 
html.loading body { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0; 
 
    transition: opacity 0; 
 
} 
 

 
button { 
 
    background: #00A3FF; 
 
    color: white; 
 
    padding: 0.2em 0.5em; 
 
    font-size: 1.5em; 
 
}

<html class="loading"> 
 
<head> 
 
    <script> 
 
    var html = document.getElementsByTagName('html')[0]; 
 
    var removeLoading = function() { 
 
     // In a production application you would remove the loading class when your 
 
     // application is initialized and ready to go. Here we just artificially wait 
 
     // 3 seconds before removing the class. 
 
     setTimeout(function() { 
 
     html.className = html.className.replace(/loading/, ''); 
 
     }, 3000); 
 
    }; 
 
    removeLoading(); 
 
    </script> 
 

 
</head> 
 
<body> 
 
    sdfsdfsdfsdf 
 
</body> 
 

 
</html>

출처

2017-12-11 Kuben Padayachee

'에는 overlay' 여전히 불분명 한 회색로드의 앞에 div 레이어를 표시 할 수 있습니다! 더 많은 것을 설명하려고하면 – Pedram

좋아, 브라우저를 열면 위의 코드로 무엇을 처음 보나요? 회색으로 표시된 층은 사라지고 3-4 초 후에 페이지 내용을 나타냅니다. 그래서 내가 원하는 것은이 회색 로딩 레이어 앞에 텍스트와 이미지가있는 레이어를 표시하는 것입니다. 코드를 알아 채면 주 내용을로드하는 동안 회 전자를 표시하도록 프로그래밍됩니다. 배경 이미지 대신 레이어가 필요합니다. 명확한? –

그래, 문제는 단지'class'를'html' 태그에 추가 한 다음 페이지가로드 될 때 그것을 제거한다는 것입니다. 이 코드를 사용하지 않으려면 다른 코드를 사용해보십시오. 다른 코드를 사용하는 데 도움이된다고 말해주십시오. – Pedram

수있는 유일한 방법은 html 태그에 pseudo element이다가 loading 클래스 갖는다 :

html.loading::before { 
    content: "Loading..."; 
    color: #ff5656; 
    font-size: 50px; 
    text-align: center; 
    display: block; 
}

을 원하는 경우와 함께 이미지 등을 추가 할 수 있습니다. html

html { 
 
    -webkit-transition: background-color 1s; 
 
    transition: background-color 1s; 
 
} 
 

 
html.loading::before { 
 
    content: "Loading..."; 
 
    color: #ff5656; 
 
    font-size: 50px; 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 
html, 
 
body { 
 
    min-height: 100%; 
 
} 
 

 
html.loading { 
 
    background: #333 url('http://www.airfares.ga/icons/238.gif') no-repeat 50% 200px; 
 
    -webkit-transition: background-color 0; 
 
    transition: background-color 0; 
 
} 
 

 
body { 
 
    -webkit-transition: opacity 1s ease-in; 
 
    transition: opacity 1s ease-in; 
 
} 
 

 
html.loading body { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0; 
 
    transition: opacity 0; 
 
} 
 

 
button { 
 
    background: #00A3FF; 
 
    color: white; 
 
    padding: 0.2em 0.5em; 
 
    font-size: 1.5em; 
 
}

<html class="loading"> 
 
<head> 
 
    <script> 
 
    var html = document.getElementsByTagName('html')[0]; 
 
    var removeLoading = function() { 
 
     // In a production application you would remove the loading class when your 
 
     // application is initialized and ready to go. Here we just artificially wait 
 
     // 3 seconds before removing the class. 
 
     setTimeout(function() { 
 
     html.className = html.className.replace(/loading/, ''); 
 
     }, 3000); 
 
    }; 
 
    removeLoading(); 
 
    </script> 
 

 
</head> 
 
<body> 
 
    sdfsdfsdfsdf 
 
</body> 
 

 
</html>

출처

2017-12-11 09:54:25 Pedram

내 질문에 설명 된대로 완벽하게 작동합니다. 콘텐츠 속성이 예를 들어

helloworld

과 같은 html 태그를 받아 들일 수 있는지 궁금 해서요. 이미지와 텍스트를 표시 할 때 사용할 수 있습니다. –

@KubenPadayachee 아니요. 'html' 태그를 허용하지 않지만 쉽게 이미지를 사용할 수 있습니다. 예를 들어'html.loading :: after {content : "", width : 200px; 높이 : 200px; 배경 : url ('..'); 디스플레이 : 블록}' – Pedram

로딩 클래스 앞에 레이어를 표시하는 방법

답변

helloworld

관련 문제