페이지가로드 된 후 페이드 인하는 방법 : Javascript

페이드 효과 스크립트를 사용하여 내 홈페이지를 페이드 인하지만 배경 이미지가로드되면 페이드를 시작하고 싶습니다.페이지가로드 된 후 페이드 인하는 방법 : Javascript

어떻게 이것을 기존 자바 스크립트에 통합 할 수 있습니까?

업데이트] 스크립트 :

<script type="text/javascript"> 
$(window).load(function() { 
    if (window.localStorage && !localStorage['faded']) { 
     localStorage['faded'] = true; 
     $('body').hide().fadeIn(500); 
    } 
}); 
</script>

CSS :

html { 
    background: #000; 
    height: 100%; 
} 
body { 
    background: black url(images/bg.jpg) no-repeat 200px center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: 0; 
    height: 100%; 
}

출처

2013-04-27 pianoman

페이지를 기다리는 데 실제로 2.8 초가 걸립니다. 나는 몇몇 사용자가 그것을 좌절감을 느낄 것이라고 내기 때문에 나는 이것을 가져온다. 특히 거대한 배경 이미지가로드 될 때까지 기다려야하는 경우 특히 그렇습니다. 페이드 인을 단축 할 수도 있습니다. – Elimn

[이 주제는 여기에서 계속했습니다] (http://stackoverflow.com/questions/16248387/is-using-a-fade-effect-on-page-considered-excessive-in-terms-of-design-load -시각). 다행스럽게도 여기 사용자들로부터 더 많은 통찰력을 얻을 수 있고 장단점을 달아 볼 수 있습니다. – pianoman

사용 $ (창) .load 대신 .ready $ (문서)의 - the difference 후자는 실행하는 것입니다 이미지를 포함하여 모든 애셋이로드 된 후

출처

2013-04-27 04:17:27

간단한 해결책입니다. 문서를 준비 할 때 body를'display : none'으로 설정하기를 원할 수도 있습니다. 그렇지 않으면 배경이 마침내 페이드 인으로 만 돌아 오면 몸체가 사라집니다. 접근성을 위해 CSS를 통해 몸체를 숨기고 싶지 않을 것입니다. – Elimn

나는 시체가 사라지는 것을 눈치 채지 못했다. 이것은 아직 스스로를 보여주지 못했을 가능성이있는 결함입니까? – pianoman

@kurzweilguy 캐시를 지우거나 하드로드를 수행하면 차이점을 알아야합니다. '$ (window) .load'는 이미지를 포함한 모든 페이지가로드 될 때까지 실행되지 않습니다. 애셋의 크기와 양에 따라이 이벤트는 페이지가 렌더링 된 후 몇 초 후에 시작됩니다. 특히 느린 인터넷 연결에서. 'body'가 아직 CSS로 숨겨져 있지 않으면 배경 이미지 등이로드 된 후에 숨길 것입니다. – Elimn

페이지가로드 된 후 페이드 인하는 방법 : Javascript

답변

관련 문제