Ajax/jquery 기술로 페이지 내용을 미리 로드할 수 있습니까?
모든 페이지 내용(로딩바/애니메이션된 gif 표시 등)을 프리로드할 수 있습니까?또는 텍스트를 로드합니다.내용이 완전히 로드된 후 사용자/방문자에게 표시될 때까지? 가능하다면 이를 위해 따라야 할 지침이나 리소스를 알려줄 수 있습니까?이미지 프리로더를 쉽게 찾을 수 있었기 때문에, 페이지에 모든 콘텐츠가 표시되기 전에 프리로딩되는 프리로딩 기술을 찾고 있습니다.
이를 위해 Ajax를 사용할 필요가 없습니다.페이지의 래퍼 디브를 설정하기만 하면 됩니다.display로.none그러면 다음으로 변경합니다.block문서를 로드할 때 사용합니다.
바닐라 자바스크립트를 사용하면 코드가 다음과 같이 보일 수 있습니다.
<script type="text/javascript">
function preloader() {
document.getElementById("preloader").style.display = "none";
document.getElementById("container").style.display = "block";
}
window.onload = preloader;
</script>
<style>
div#wrapper {
display: none;
}
div#preloader {
top: 0; right: 10px;
position:absolute;
z-index:1000;
width: 132px; height: 38px;
background: url(path/to/preloaderBg.png) no-repeat;
cursor: wait;
text-shadow: 0px 1px 0px #fefefe; //webkit
}
</style>
<body>
<div id="preloader">Loading... Please Wait.</div>
<div id="wrapper">
<!-- page contents goes here -->
</div>
</body>
jQuery에서 업데이트:
<script type="text/javascript">
// Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){
$("#preloader").hide();
$("#container").show();
});
</script>
관련 문서:이벤트/준비됨, 이벤트/로드, CSS/css & Core/$
전체 페이지가 로드될 때까지 내용이 숨겨지는 방법을 선택하는 경우, 처음에는 CSS에 숨겨졌다가 JavaScript에 숨겨지지 않도록 하십시오.이렇게 하면 JavaScript를 사용할 수 없거나 사용할 수 없는 사용자는 페이지를 전혀 받을 수 없습니다.대신 스크립트에서 숨기기와 표시를 모두 수행합니다.
<body>
<script type="text/javascript">
document.body.style.visibility= 'hidden';
window.onload= function() { document.body.style.visibility= 'visible'; };
</script>
또한 '프리로더'라는 용어는 여기서 수행하는 작업에 적합하지 않습니다.'pre'는 페이지를 가져와 캐시에 저장하여 필요한 시간까지 페이지를 이동할 수 있도록 함으로써 성능을 향상시키는 것을 의미합니다.
그러나 실제로는 그 반대입니다. 페이지를 로드하는 동안 부분 콘텐츠를 사용할 수 있을 때 사용자에게 아무것도 보여주지 않고 대기함으로써 성능이 저하됩니다.점진적인 렌더링을 배제하면 브라우징 속도가 빨라지지 않고 느려집니다.일반적으로 명백히 잘못된 것이며, 일부 틈새 사례를 제외하고는 일반 브라우저 점진적 렌더링이 가장 좋습니다.이것이 웹이 작동하는 방식입니다. 사람들은 지금쯤 그것에 익숙해져 있습니다.
(즉, 웹을 실제로 사용하거나 이해하지는 못하지만 회사의 사이트를 한 번에 표시할 것을 요구하는 멍청한 관리 유형을 제외한 사람들입니다.)
최선의 방법
함수 아약스{$('#wapal'), "이미지 경로";$.580달러url:'hosts 파일.php',방법: 'get',success:함수(데이터){if(데이터 ==') 반환;$('#wapal'), .vmdk(데이터);}});}이미지가 완전히 로드되었을 때 알아야 하는 작업을 수행하여 사전 로드 작업을 수행했습니다.$.get()함수이며 콜백 함수를 마지막 매개 변수로 전달했습니다.이렇게 하면 이미지가 실제로 다운로드되었을 때 콜백이 실행되고 브라우저가 이미 이미지를 캐시에 가지고 있다는 것을 알 수 있습니다.
프리로드하라는 각 이미지에 대해 전역 변수를 증가시키는 함수를 작성한 다음 콜백을 통해 카운터를 감소시킬 수 있습니다.카운터가 0으로 돌아오면 다른 함수를 호출합니다.이제 모든 이미지가 사전 로드되면 이 기능이 실행됩니다.
이것은 이미지를 위한 것입니다.$(문서) 시 다른 모든 것이 로드될 것을 보장할 수 있습니다.ready(준비)가 실행됩니다.따라서 이 시점에서 루틴을 시작하면 페이지의 모든 내용이 로드되어야 합니다.
당신은 jquery로 쉽게 할 수 있습니다.
대본
$(window).load(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
스타일
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"
DMus-Jerad Answer에 대한 일부 수정 사항은 광고가 페이지에 있을 때 작동하지 않기 때문입니다.
당신은 jquery로 쉽게 할 수 있습니다.
대본
$(document).ready(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
스타일
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"
언급URL : https://stackoverflow.com/questions/728261/is-it-possible-to-preload-page-contents-with-ajax-jquery-technique
'programing' 카테고리의 다른 글
| 도커-공구함 마리애드브 용기 (0) | 2023.09.04 |
|---|---|
| 판다 데이터 프레임 열에 쉼표를 수천 개의 구분 기호로 삽입하는 방법은 무엇입니까? (0) | 2023.09.04 |
| AJAX 호출 시 다운로드 전에 window.on이 호출되지 않도록 할 수 있습니까? (0) | 2023.09.04 |
| 자바 수학bigInteger를 java.lang에 캐스팅할 수 없습니다.정수 (0) | 2023.09.04 |
| PowerShell의 유니언과 교차로? (0) | 2023.09.04 |