이미지가 완료되기 전에 JQuery 'fadeIn'이 너무 빨리 실행됩니다.

나는 (wordpress를 사용하여) 내 친구의 포트폴리오 웹 사이트에 최종 수정을 가하고 있지만 단순한 JQuery 페이지 전환 fadeIn 효과에 문제가 있습니다. (경고 : NSFW)이미지가 완료되기 전에 JQuery 'fadeIn'이 너무 빨리 실행됩니다.

여기 사이트에 링크 년대 "프로젝트"섹션에서http://www.alexdebrabant.com/front/

, 나는 게시물의 모든 사진과 함께 슬라이드 쇼를 만들려면 JQuery와 사이클을 사용하고 있습니다. 잘 작동합니다. 그러나 "인물"섹션에서 상황이 조금씩 다릅니다. 게시 당 하나의 그림 만 있기 때문입니다. 따라서 PREV NEXT 버튼을 누르면 방문자가 새로운 게시물로 이동하므로 매번 새로운 페이지가로드됩니다. 제 생각은 일종의 페이드 전환을 사용하여 "PROJECTS"섹션에서 슬라이드 쇼를 모방하려고했습니다. 현재로서는 아주 기본적인 fadeIn 효과 만 있습니다. 내 문제는 이미지가 캐싱되지 않는 한 이미지로드가 완료되기 전에 너무 빨리 fadeIn 효과가 발생한다는 것입니다.

저는 JQuery의 초보자이며 쉬운 해결책이 있어야한다고 생각합니다. 그러나 찾을 수없는 것 같습니다.

또한 "PROJECTS"섹션에서 슬라이드 쇼를 더 잘 모방하거나 복제하는 Jquery 효과에 대해 알고 있다면 그 또한 좋을 것입니다. 아마도 페이지 교차 페이드 효과 (있는 경우) 또는 페이드 아웃/페이드 어쩌면.

도움을 주시면 감사하겠습니다.

<!-- contentload --> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    $('#content').fadeIn(500); 

}); 
</script> 
<!-- contentload --> 

<style> 
#content {display: none;} 
</style>

건배 :

여기에 코드입니다!

톰

출처

2012-03-05 thom_p

의 사용하려고! =/-1 경고가없는 경우. –

@ TravisJ 경고가 추가되었습니다. –

사용 $(window).load() 또는 대신 $(document).ready()의 $('img').load(). 점이 document.ready 인 경우 전체 페이지가로드 될 때 이 아닌이 아닌 DOM이 쿼리 할 준비가되면이를 발생시킵니다.

출처

2012-03-05 21:51:26

고마워 MДΓΓ БДLL! 나는 해결책이 있어야한다는 것을 알았다. 방금 변경하고 완벽하게 작동합니다. 매우 감사드립니다. –

그럴 경우, [답변 수락] (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) 하시겠습니까? –

는 jQuery load 대신 그 링크가 노골적인 내용을 포함 document.ready

출처

2012-03-05 21:52:07

감사! 그 일을 했어! –

이미지가 완료되기 전에 JQuery 'fadeIn'이 너무 빨리 실행됩니다.

답변

관련 문제