jquery mobile 로더가 포함 된 동일한 페이지 응용 프로그램

Question

도전 과제는 jQuery 모바일을 사용하는 Cordova 응용 프로그램을 작성하고 많은 기능에 대해 단일 페이지 응용 프로그램 접근 방식을 사용하고 있습니다.

그래서 페이지를 선택할 때 해당 페이지를 aJax 호출의 콘텐츠로 동적으로 채 웁니다. 그러나 aJax 호출이 반환 될 때까지 이미 페이지가 열리고 비어 있습니다. 어떻게 aJax가 반환 될 때까지 로딩 화면을 넣을 수 있습니까?

아래의 샘플 코드를 참조하십시오.

#loading-img { 
     background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat; 
     height: 100%; 
     z-index: 20; 
    } 

    .overlay { 
     background: #e9e9e9; 
     display: none; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     opacity: 0.5; 
    } 

CSS를

<a href="#profilepageself" class="leavingChatPage" id="goToProfile" >Profile</a> 

나는 위의 JS 링크를 클릭 할 때 발생하게 모든 것을 흐리게 상상이 내 페이지

$("#goToProfile").on("click",function(event){ 
    $(".overlay").show(); 
    console.log("going to profile"); 
}); 

로드에 대한 링크.

$.get(url, function(data) { 
    $.each(data.items, function (index, event) { 
     console.log('founda practice %o',event); 
     //create my html 
     .......... 

    }); 
    $(".overlay").hide(); 
}); 

그런 다음 aJax가 반환되면 나는 그것을 숨 깁니다.

전혀 작동하지 않는 것 같습니다. 이유를 모르겠다. 여기

$.get(url, function(data) { 
    $.each(data.items, function(index, event) { 
     console.log('founda practice %o', event); 
     //create my html 
     .......... 
    }); 
    }) 
    .always(function() { 
    $(".overlay").hide(); 
    }); 

가 기준입니다 :

Answer 1

당신은 .always 콜백 사용할 수 있습니다 또한 https://api.jquery.com/jquery.get/

을 jQuery.get() 당신이 열려도 할 수 있고 AJAX 호출 내부에 로더를 닫습니다, Ajax 단지 속기입니다 like :

$.ajax({ 
    beforeSend: function(){ 
    $(".overlay").show(); 
    }, 
    success: function(data){ 
    $.each(data.items, function (index, event) { 
     console.log('founda practice %o',event); 
     //create my html 
     .......... 
    }); 
    }, 
    complete: function(){ 
    $(".overlay").hide(); 
    } 
}); 

자세히 jQuery Mobile에는 자체 로더가 있습니까? 당신이 Velocity.gif 더 나은, 단순히 ajax-loader.gif로 이름을 변경하고 (당신은 CSS/images 폴더에서 찾을 것입니다) 기본 JQM 파일을 덮어 싶습니다 http://demos.jquerymobile.com/1.4.5/loader/

: 여기

데모입니다. 그런 다음, 당신은 당신이 원하는 것처럼 스타일을 표준 JQM 기능을 사용할 수 있습니다

$.mobile.loading("show"); 
$.mobile.loading("hide"); 

이 방법을 이미 내장되어 같이 JQM에 (데모를 확인, 당신은, 오버레이를 만들 필요가 없습니다).