사이트를 페이드로 표시하여 제대로로드 된 튜토리얼이나 플러그인이있어 콘텐츠가 기본적으로 부드럽게 표시됩니다.jQuery 일단로드되면 사이트/콘텐츠가 희미해질까요?
나는
예를 들어다양한 축소판 포트폴리오 페이지, 그들은 단지 표시 ... 그것은, 머리글 또는 바닥 글로 이미 이전 페이지에서 캐시됩니다 단지 특정 지역이었다 경우가 쉬울 것이다 가정 준비가되면 부드럽게.
이 작업을 수행 할 수 있습니까?
div#main-content { display: none; }
그런 다음이 스크립트를 사용 :
는 사업부 (예를 들어,<div id="main-content">)로 콘텐츠를 래핑이를 넣어 당신의 CSS에서, 어떤 도움 :)
예 주셔서 감사합니다. 컨테이너가 전체 콘텐츠를 포함하는 사업부의 ID입니다
$(document).ready(function() {
$('#main-content').fadeIn();
});
jQuery(document).ready(function(){
jQuery("#container").fadeIn();
});
.
우선, 일반적으로 웹 디자이너는 인식 된 페이지로드 시간을 개선하여 가능한 빨리 표시되도록 노력합니다. 이것은 적극적으로 다른 방향으로 나아가 모든 것이 준비 될 때까지 아무 것도 보이지 않을 수도있는 빈 페이지를 제시합니다.
하지만 상황에 맞는 적절한의 경우 :. 눈에 보이는 모든 body의 후손이 될 것이기 때문에
, 당신은 body 숨겨 넣은 다음에 퇴색 수는 (자바 스크립트없이 사용자를위한 대체를 포함하는 것이 중요 할 것 일반적으로 최소한 according to Yahoo 2 % 미만이지만 여전히). 그래서의 라인을 따라 :
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- This next would probably be in your main CSS file, but shown
inline here just for purposes of the example
-->
<style type="text/css">
body {
/* Hide it for nifty fade-in effect */
display: none;
}
</style>
<!-- Fallback for non-JavaScript people -->
<noscript>
<style type="text/css">
body {
/* Re-displays it by overriding the above */
display: block;
}
</style>
</noscript>
</head>
<body>
...content...
<script src="jquery.js"></script>
<script>
// This version runs the function *immediately*
(function($) {
$(document.body).fadeIn(1000);
})(jQuery);
</script>
</body>
</html>
때를위한
기다립니다 "준비" 이벤트 :
// This version waits until jQuery's "ready" event
jQuery(function($) {
$(document.body).fadeIn(1000);
});
워싱턴 window#load 이벤트에 대한 그것 : 매우 늦게 페이지로드 과정에서, (모든 이미지 포함) 모든 외부 자원을로드 한 후
// This version waits until the window#load event
(function($) {
$(window).load(function() {
$(document.body).fadeIn(1000);
});
})(jQuery);
window#load 발생합니다. 하지만 당신은 모든 것이로드 될 때까지 기다리고 싶다고 말했습니다. 그래서 당신이하고 싶은 일이 될 수 있습니다. 그것은 분명히 귀하의 페이지가 느리게 보이게 만들 것입니다 ...
좋은 .. 대체품에 대해 생각하는 사람은 거의 없습니다. +1에 대한 좋은 제안 –
True. 그러나 나는 여전히 몸을 넣을 것이다. {display : none; } CSS 파일에 가능한 한 많이 포함 된 스타일을 피하려고합니다. –
@sushilbharwani : 예. 일반적으로 방문자의 2 % 미만입니다 (적어도 야후의 전화 번호) (http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/)),하지만 여전히 ... –
이것을 달성하는 또 다른 방법은 Animate.css 프로젝트를 통해서입니다.순수 CSS는 너무 JS에 의존 할 필요가 없습니다 :.
그냥 부모 요소에 '애니메이션'과 'fadeIn'클래스를 추가하고 모든 아이들에 사라질 것이다
$(document).ready(function() {
$('body').hide().fadeIn('fast');
});
누군가 Javascript를 사용하도록 설정하지 않은 경우에 대비하여이 기능이 대체됩니까? – optimus203