jspinner를 사용하여 전체 HTML 페이지 로드 쿼리
모든 DIV, 텍스트 및 이미지를 포함한 전체 페이지를 표시할 때까지 기다리는 jQuery 스크립트를 만듭니다.페이지가 로드되는 동안 페이지의 일부를 보여주는 대신 회전하는 GIF 이미지를 보여주고 전체 페이지가 로드되면 브라우저 창에서 페이지 내용을 페이드할 수 있습니다.
컨테이너 DIV에 Ajax 요청과 함께 로드할 스크립트가 많이 있지만 이는 다릅니다.HTML 페이지가 로드되는 동안 회전하는 GIF가 표시됩니다.어떤 도움이든 감사합니다.
이 스크립트 유형은 Ajax 요청에서만 작동합니다.
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
$(document).ready(...)DOM이 로드되는 즉시 실행됩니다.이건 너무 일러요.사용해야 합니다.$(window).on('load', ...):
JavaScript:
$(window).on('load', function(){
$('#cover').fadeOut(1000);
})
CSS:
#cover {
background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
}
HTML:
<div id="cover"></div>
<!-- rest of the page... -->
이 jsFiddle을 보세요: http://jsfiddle.net/gK9wH/9/
전체 페이지를 오버레이로 덮은 다음 페이지가 로드되면 오버레이를 제거합니다.원하는 경우 loading.gif도 표시하도록 조정할 수 있습니다.다음은 예입니다.
HTML
<body>
<div id="container">
<h2>Header</h2>
<p>Page content goes here.</p>
<br />
<button id="remove_overlay">Remove Overlay</button>
</div>
</body>
CSS
#container{padding:20px;}
h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;}
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:2305px !important; /*change to YOUR page height*/
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 998;
}
#remove_overlay{position:relative; z-index:1000;}
jQuery:
$(document).ready(function () {
// Set a variable that is set to the div containing the overlay (created on page load)
var page_overlay = jQuery('<div id="overlay"> </div>');
// Function to Add the overlay to the page
function showOverlay(){
page_overlay.appendTo(document.body);
}
// Function to Remove the overlay from the page
function hideOverlay(){
page_overlay.remove();
}
// Show the overlay.
$(showOverlay);
});
});
$(document).ready(function () {
$(hideOverlay);
});
페이지가 요청되는 즉시 오버레이가 로드되도록 이 옵션을 조정해야 합니다(페이지를 조정합니다).$(showOverlay);문서가 준비되기 전에 실행되도록 호출합니다.
오버레이를 제거하기 위한 버튼을 사용한 간단한 조작이 있습니다.당신은 그곳에서 갈 수 있을 것입니다 :) http://jsfiddle.net/3quN5/
제 생각에 가장 좋은 방법은 로드하는 동안 전체 페이지를 커버하는 '커버' 디비를 갖는 것입니다.불투명하고 GIF가 포함되어 있습니다.
페이지가 로드되면 다음과 같이 div를 숨깁니다.
$(document).ready(function() {
// Hide the 'cover' div
});
다음은 div를 페이지 크기로 만듭니다.
.div{
height:100%;
width:100%;
overflow:hidden;
}
먼저 바디 태그 사이에 있는 모든 것을 의미합니까?선물 돌리기를 하는 가장 좋은 방법은 gif를 반복하지 않고 중심을 맞춘 것으로 정의하는 클래스를 추가하는 것입니다.페이지를 표시할 준비가 되면 클래스를 제거합니다.
$('body').addClass('loading')
$('body').removeClass('loading')
당신이 무언가를 제출한 후 DOM 추가를 통해 gif를 추가하려고 하면 페이지가 제출되었기 때문에 일부 브라우저는 그것을 하지 않을 것이기 때문에 이것은 항상 최고의 기술입니다.
언급URL : https://stackoverflow.com/questions/10742665/jquery-whole-html-page-load-with-spinner
'programing' 카테고리의 다른 글
| 스크립트로 작성한 후 SQL Management Studio에서 테이블이 존재함을 인식하지 못함 (0) | 2023.08.15 |
|---|---|
| Oracle USING 절 모범 사례 (0) | 2023.08.15 |
| 남은 공간을 View로 채우는 레이아웃을 만드는 방법은 무엇입니까? (0) | 2023.08.15 |
| JSP/Servlet 및 Ajax를 사용하여 서버에 파일을 업로드하려면 어떻게 해야 합니까? (0) | 2023.08.15 |
| 태그에서 기본값() 방지 (0) | 2023.08.15 |