페이지가 완전히로드 될 때까지 브라우저가 페이지를 표시 할 때까지 기다리도록하려면 어떻게해야합니까?
실제로 웹 페이지가로드되는 것을 보는 방법이 싫습니다. 페이지가 완전히로드되고 모든 스크립트와 이미지를 포함하여 표시 될 준비가 될 때까지 기다린 다음 브라우저에서 표시하도록하는 것이 훨씬 더 매력적이라고 생각합니다. 그래서 두 가지 질문이 있습니다.
- 어떻게 할 수 있습니까?
- 나는 웹 개발에 대해 완전히 멍청하지만 이것이 일반적인 관행입니까? 그렇지 않다면 왜?
지혜에 미리 감사드립니다!
이것은 주어진 모든 이유 등으로 인해 매우 나쁜 생각입니다. 즉, 다음은 jQuery를 사용하여 수행하는 방법입니다 .
<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#body').show();
$('#msg').hide();
});
</script>
</body>
사용자가 JavaScript를 비활성화 한 경우 페이지를 볼 수 없습니다. 페이지로드가 완료되지 않으면 페이지가 표시되지 않습니다. 페이지를로드하는 데 시간이 너무 오래 걸리면 문제가 발생한 것으로 간주하고 * 잠시 기다려주십시오 ... * ing 대신 다른 곳으로 이동할 수 있습니다.
정말 나쁜 생각이라고 생각합니다. 사용자는 진행 상황을 단순하고 단순하게보고 싶어합니다. 페이지를 몇 초 동안 한 상태로 유지 한 다음로드 된 페이지를 즉시 표시하면 사용자가 아무 일도 일어나지 않는 것처럼 느끼고 방문을 잃을 가능성이 높습니다.
한 가지 옵션은 작업이 백그라운드에서 처리되는 동안 페이지에로드 상태를 표시하는 것이지만 일반적으로 사이트가 실제로 사용자 입력에 대해 처리를 수행 할 때 예약됩니다.
http://www.webdeveloper.com/forum/showthread.php?t=180958
결론적으로, 최소한 페이지가로드되는 동안 약간의 시각적 활동을 보여 주어야합니다. 페이지를 한 번에 조금씩로드하는 것이 그렇게 나쁘지는 않다고 생각합니다 (페이지를 심각하게 느리게하는 작업을 수행하지 않는다고 가정). 로드 시간).
이것에 대한 유효한 사용이 확실히 있습니다. 하나는 모든 페이지 요소와 JavaScript가로드 될 때까지 사람들이 링크를 클릭하거나 JavaScript 이벤트를 발생시키는 것을 방지하는 것입니다.
IE 에서는 페이지 전환을 사용할 수 있습니다. 이는 페이지가 완전히로드 될 때까지 페이지가 표시되지 않음을 의미합니다.
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />
짧은 기간을 확인하십시오. 페이지가 완전히로드 될 때까지 페이지가 표시되지 않도록하는 것으로 충분합니다.
에서 파이어 폭스 와 다른 브라우저, 내가 사용했던 솔루션은 자바 스크립트 그 가죽 안에 페이지 풋의 맨 끝에 다음 페이지 흰색의 크기입니다 DIV를 만드는 것입니다. 또 다른 방법은 jQuery를 사용하고 숨기는 것입니다. IE 솔루션만큼 고통 스럽지는 않지만 둘 다 잘 작동합니다.
다음은 jQuery를 사용하는 솔루션입니다.
<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
$('#container').css('opacity', 1);
});
</script>
이 스크립트를 내 </body>태그 바로 뒤에 넣었습니다 . "#container"를 숨기려는 DOM 요소의 선택기로 바꾸십시오. 나는 이것의 여러 변형 ( .hide()/ .show()및 .fadeOut()/ 포함)을 시도했으며 .fadeIn()불투명도를 설정하는 것만으로도 악영향 (깜박임, 페이지 높이 변경 등)이 가장 적은 것 같습니다. 더 부드러운 전환 css('opacity', 0)을 fadeTo(100, 1)위해로 바꿀 수도 있습니다 . (아니요, fadeIn()적어도 jQuery 1.3.2에서는 작동하지 않습니다.)
이제주의 사항 : TypeKit을 사용하고 있으며 페이지를 새로 고칠 때 성가신 깜박임이 발생하고 글꼴을로드하는 데 수백 밀리 초가 걸리기 때문에 위의 내용을 구현했습니다. 따라서 TypeKit이로드 될 때까지 화면에 텍스트가 표시되는 것을 원하지 않습니다. 그러나 위의 코드를 사용하고 페이지의 내용이로드되지 않으면 분명히 큰 문제가됩니다. 개선 할 수있는 두 가지 분명한 방법이 있습니다.
- 페이지로드 여부에 관계없이 모든 항목이 표시되는 최대 시간 제한 (예 : 1 초)
- 일종의 로딩 표시기 (예 : http://www.ajaxload.info/ )
여기서 로딩 표시기를 구현하는 것은 신경 쓰지 않지만 시간 제한은 쉽습니다. 위의 스크립트에 다음을 추가하십시오.
$(document).ready(function() {
setTimeout('$("#container").css("opacity", 1)', 1000);
});
이제 최악의 경우 페이지가 표시되는 데 시간이 더 걸립니다.
또한 서버가 페이지를 버퍼링하고 즉시 (빌드하는 동안) 클라이언트 브라우저로 스트리밍 하지 않는지 확인하십시오 .
기술 스택을 지정하지 않았으므로 :
- PHP : ob_start 살펴보기
- ASP.NET : Response.BufferOutput = True (기본값)인지 확인합니다.
<body> 태그 바로 뒤에 다음과 같이 추가하십시오.
<style> body {opacity:0;}</style>
그리고 가장 먼저 <head>에 다음과 같은 것을 추가하십시오.
<script>
window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
</script>
이것이 좋은 습관인지 나쁜지는 방문자와 기다리는 시간에 달려 있습니다.
여전히 열려 있고 여기에 답변이 표시되지 않는 질문은 페이지가 안정되었는지 확인하는 방법입니다. 예를 들어 글꼴을로드하는 경우 모든 글꼴이로드되고 표시 될 때까지 페이지가 약간 리플 로우 될 수 있습니다. 페이지 렌더링이 완료되었음을 알려주는 이벤트가 있는지 알고 싶습니다.
필수 : "jQuery 사용"
페이지 상단에 모든 것을 덮는 흑백 div를 배치 한 다음 document.load 이벤트에서 제거하는 페이지를 보았습니다. 또는 jQuery에서 .ready를 사용할 수 있습니다. 즉, 내가 본 것 중 가장 성가신 웹 페이지 중 하나였습니다 .
CSS를 사용하여 모든 것을 숨길 수 있습니다.
#some_div
{
display: none;
}
그런 다음 자바 스크립트에서 document.onload에 함수를 할당하여 해당 div를 제거하십시오.
jQuery는 이와 같은 일을 매우 쉽게 만듭니다.
이것이 항상 좋은 생각은 아니지만 정말로 그렇게 할 것인지 결정할 수 있습니다. 이를 수행하는 몇 가지 다른 방법이 있으며 여기에서 간단한 예를 찾았습니다.
http://www.reconn.us/content/view/37/47/
아마도 최고의 솔루션은 아니지만 자신 만의 솔루션을 개발하는 데 도움이 될 것입니다. 행운을 빕니다.
In addition to Trevor Burnham's answer if you want to deal with disabled javascript and defer css loading
HTML5
<html class="no-js">
<head>...</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
CSS
//at the beginning of the page
.js main, .js footer{
opacity:0;
}
JAVASCRIPT
//at the beginning of the page before loading jquery
var h = document.querySelector("html");
h.className += ' ' + 'js';
h.className = h.className.replace(
new RegExp('( |^)' + 'no-js' + '( |$)', 'g'), ' ').trim();
JQUERY
//somewhere at the end of the page after loading jquery
$(window).load(function() {
$('main').css('opacity',1);
$('footer').css('opacity',1);
});
RESOURCES
in PHP-Fusion Open Source CMS, http://www.php-fusion.co.uk, we do it this way at core -
<?php
ob_start();
// Your PHP codes here
?>
YOUR HTML HERE
<?php
$html_output = ob_get_contents();
ob_end_clean();
echo $html_output;
?>
You won't be able to see anything loading one by one. The only loader will be your browser tab spinner, and it just displays everything in an instant after everything is loaded. Give it a try.
This method is fully compliant in html files.
While I agree with the others that you should not want it I'll just briefly explain what you can do to make a small difference without going all the way and actually blocking content that is already there -- maybe this will be enough to keep both you and your visitors happy.
The browser starts loading a page and will process externally located css and js later, especially if the place the css/js is linked is at the 'correct' place. (I think the advice is to load js as late as possible, and to use external css that you load in the header). Now if you have some portion of your css and/or js that you would like to be applied as soon as possible simply include that in the page itself. This will be against the advice of performance tools like YSlow but it probably will increase the change of your page showing up like you want it to be shown. Use this only when really needed!
You could start by having your site's main index page contain only a message saying "Loading". From here you could use ajax to fetch the contents of your next page and embed it into the current one, on completion removing the "Loading" message.
You might be able to get away with just including a loading message container at the top of your page which is 100% width/height and then removing the said div on load complete.
The latter may not work perfectly in both situations and will depends on how the browser renders content.
I'm not entirely sure if its a good idea. For simple static sites I would say not. However, I have seen a lot of heavy javascript sites lately from design companies that use complex animation and are one page. These sites use a loading message to wait for all scripts/html/css to be loaded so that the page functions as expected.
I know this is an old thread, but still. Another simple option is this library: http://gayadesign.com/scripts/queryLoader2/
Don't use display:none. If you do, you will see images resize/reposition when you do the show(). Use visibility:hidden instead and it will lay everything out correctly, but it just won't be visible until you tell it to.
Hope this code will help
<html>
<head>
<style type="text/css">
.js #flash {display: none;}
</style>
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
</head>
<body>
<!-- the rest of your code goes here -->
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
// Stuff to do as soon as the body finishes loading.
// No need for $(document).ready() here.
</script>
</body>
</html>
'developer tip' 카테고리의 다른 글
| C #에서 iCal 파일 만들기 (0) | 2020.10.22 |
|---|---|
| IMAP을 사용하여 Gmail에서 Java 애플리케이션으로 메일 가져 오기 (0) | 2020.10.22 |
| div 요소의 크기 조정 (0) | 2020.10.22 |
| Enumeration이 java.utils의 List가 아닌 ArrayList로 변환되는 이유는 무엇입니까? (0) | 2020.10.22 |
| 최대 절전 양방향 매핑으로 인한 json serializer의 순환 참조를 해결하는 방법은 무엇입니까? (0) | 2020.10.22 |