웹 사이트에 집중적 인 호출을하는 동안 상당히 느리게로드되는 섹션이 있습니다.
div페이지가 준비되는 동안 표시하고 모든 준비가되면 사라지는 “로드 중”과 비슷한 말을 할 수있는 아이디어 가 있습니까?
답변
나는 이것을 필요로했고 약간의 연구 후에 나는 이것을 생각해 냈다 ( jQuery가 필요하다) :
먼저 <body>태그 바로 다음에 다음을 추가하십시오.
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
그런 다음 div 및 이미지의 스타일 클래스를 CSS에 추가하십시오.
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
그런 다음이 자바 스크립트를 페이지에 추가하십시오 (바람직하게는 페이지 끝, 닫는 </body>태그 앞 ).
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>
마지막으로 background-colour스타일 클래스 를 사용하여 로딩 이미지의 위치와 로딩 div 의 위치를 조정하십시오 .
이것이 잘 작동합니다. 그러나 물론 ajax-loader.gif어딘가에 있어야합니다 . 여기 공짜 . (오른쪽 클릭> 다른 이름으로 이미지 저장 …)
답변
이 스크립트는 페이지가로드 될 때 전체 창을 덮는 div를 추가합니다. CSS 전용 로딩 스피너가 자동으로 표시됩니다. 윈도우 (문서가 아님)의 로딩이 완료 될 때까지 기다린 다음 옵션으로 몇 초 더 기다립니다.
- jQuery 3과 함께 작동합니다 (새로운 창로드 이벤트가 있습니다)
- 이미지가 필요하지 않지만 쉽게 추가 할 수 있습니다
- 더 많은 브랜딩 또는 지침에 대한 지연 변경
- 의존성은 jQuery입니다.
https://projects.lukehaas.me/css-loaders의 CSS 로더 코드
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
} .loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loadingDiv {
position:absolute;;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
}This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.
<ul>
<li>Works with jQuery 3, which has a new window load event</li>
<li>No image needed but it's easy to add one</li>
<li>Change the delay for branding or instructions</li>
<li>Only dependency is jQuery.</li>
</ul>
Place the script below at the bottom of the body.
CSS loader code from https://projects.lukehaas.me/css-loaders
<!-- Place the script below at the bottom of the body -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>답변
window.onload = function(){ document.getElementById("loading").style.display = "none" }#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} <div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div> JS에서 만들어진 가장 간단한 페이드 아웃 효과를 가진 이미지 로딩 이미지 :
답변
나는 나를 위해 완벽하게 효과가있는 또 다른 간단한 해결책을 가지고 있습니다.
먼저 아래 표시된 것처럼 GIF를로드하면서 투명 오버레이 인 Lockon 클래스 라는 이름의 CSS를 만듭니다.
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color:white;
vertical-align:bottom;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
font-size:large;
color:blue;
font-style:italic;
font-weight:400;
background-image: url("../Common/loadingGIF.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
이제 페이지가로드 될 때마다 전체 페이지를 오버레이로 다루는이 클래스로 div를 만들어야합니다.
<div id="coverScreen" class="LockOn">
</div>
이제 페이지가 준비 될 때마다이 표지 화면을 숨겨야하며 페이지가 준비 될 때까지 사용자가 이벤트를 클릭 / 실행하는 것을 제한 할 수 있습니다.
$(window).on('load', function () {
$("#coverScreen").hide();
});
위의 해결책은 페이지가로드 될 때마다 좋습니다.
이제 페이지가로드 된 후에 질문이 있습니다. 버튼이나 이벤트가 오래 걸릴 때마다 아래 그림과 같이 클라이언트 클릭 이벤트에 표시해야합니다.
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});
즉,이 인쇄 버튼을 클릭하면 (보고서를 작성하는 데 시간이 오래 걸림) 표지가 GIF로 표시되어 
결과가 표시되고 페이지가로드 된 상태에서 창 위에 페이지가 준비되면 표지 화면이 숨겨집니다. 화면이 완전히로드되면
답변
내용의 기본값 display:none을 설정 한 다음 display:block완전히로드 된 후에 설정 하거나 이와 유사한 이벤트 처리기를 갖 습니다. 그런 다음 display:block“로드 중”으로 설정된 div가 있고 display:none이전과 동일한 이벤트 핸들러에서 설정하십시오 .
답변
글쎄, 이것은 주로 ‘집중적 인 호출’에 필요한 요소를로드하는 방법에 달려 있으며, 초기 생각은 아약스를 통해로드를 수행한다는 것입니다. 이 경우 ‘beforeSend’옵션을 사용하여 다음과 같이 아약스 호출을 할 수 있습니다.
$.ajax({
type: 'GET',
url: "some.php",
data: "name=John&location=Boston",
beforeSend: function(xhr){ <---- use this option here
$('.select_element_you_want_to_load_into').html('Loading...');
},
success: function(msg){
$('.select_element_you_want_to_load_into').html(msg);
}
});
편집
이 경우 jQuery 'display:block'/'display:none'와 함께 위 의 옵션 중 하나를 사용 $(document).ready(...)하는 것이 좋습니다. 이 $(document).ready()함수는 실행하기 전에 전체 문서 구조가로드되기를 기다립니다 ( 그러나 모든 미디어가로드 될 때까지 기다리지는 않습니다 ). 당신은 이런 식으로 할 것입니다 :
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});
답변
내 블로그는 100 % 작동합니다.
function showLoader()
{
$(".loader").fadeIn("slow");
}
function hideLoader()
{
$(".loader").fadeOut("slow");
}.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}<div class="loader">