페이지 전환을위한 jquery 플러그인

Question

iPad 용 간단한 HTML5 애플리케이션을 작성 중이며 페이지 전환을위한 간단한 jquery 솔루션을 찾고 있습니다. jQueryMobile을 추천하지만 아약스를 사용하여 현재 페이지의 다음 페이지를로드 한 다음 전환하려고 시도하는 문제가 있으므로로드하려고하는 페이지의 CSS가 방해 받고 있습니다. see my question. 나는 또한 시도했다 this이 플러그인은 내가 찾던 것이지만 문제는 그것이 iPad와 함께 작동하지 않습니다 또한 페이지 깜박임이 전환하는 동안 그래서이 옵션을 떨어 뜨린 것입니다. 내가 찾은 또 다른 옵션은 jQTouch이지만 jQTouch는 페이지 전환을 위해 div를 사용하는 방법을 모르지만 div에 대한 전환 효과에만 사용할 수 있습니다.

내가 원하는 것은 전환의 링크입니다. <a href="index.html">Transition</a> index.html은 flickering 및 css disturbance index.html 페이지없이 전환 효과로 표시되어야합니다.

사람이 저에게 전환을하는 동안 CSS를 방해하지 않고 페이지 전환을 달성 할 수있는 몇 가지 플러그인을 추천 해 주시겠습니까?

body 태그 추가

먼저 직후이 :

<div id="loading"> 
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> 
</div> 

은 그 다음의 스타일 클래스를 추가 jQuery를이 필요하지만, 아래의 솔루션은 나를 위해 일한 ...

Answer 1

는 희망이 당신을 위해 작동 당신의 CSS에 사업부 및 이미지 :

#loading { 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    position: fixed; 
    display: block; 
    opacity: 0.7; 
    background-color: #fff; 
    z-index: 99; 
    text-align: center; 
} 

#loading-image { 
    position: absolute; 
    top: 100px; 
    left: 240px; 
    z-index: 100; 
} 

그리고 마지막으로 (물론 body 태그를 닫기 전에, 바람직하게는 페이지의 끝에서) 페이지에이 자바 스크립트를 추가 :

<script language="javascript" type="text/javascript"> 
$(window).load(function() { 
$('#loading').hide(); }); 
</script> 

그런 다음 스타일 클래스를 통해로드하는 이미지의 위치와로드하는 div의 배경색을 조정하십시오.

이것은 정상적으로 작동합니다. 물론 어딘가에 ajax-loader.gif가 있어야합니다.

Try AJAXLoad 그들은 멋진 애니메이션 GIF를 가지고 있습니다 .. :)