2013-10-13 3 views
1

다음 코드가 있는데 동적 포스트를 클릭 할 때마다 또는 주 목록 페이지로 다시 돌아갈 때 Spinner 이미지를 표시하는 코드를 어디에 두어야하는지 알고 싶습니다.Show Page Loading Spinner with Google Ajax

function initialize() { 
    var feed = new google.feeds.Feed("http://howtodeployit.com/category/daily-devotion/feed/"); 
    feed.setNumEntries(8); 
    feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT); 
    feed.load(function(result) { 
     if (!result.error) { 
      var container = document.getElementById("feed"); 
      var posts = '<ul data-role="listview" data-filter="true">'; 
       for (var i = 0; i < result.feed.entries.length; i++) { 
       var entry = result.feed.entries[i]; 

        posts += '<li>'; 
        posts += '<a href="#articlepost" onclick="showPost(' + id + ')">'; 
        posts += '<div class="ui-li-heading">' + entry.title + '</div>' ; 
        posts += '<div class="ui-li-desc">' + n_date + '</div>'; 
        posts += '</a>'; 
        posts += '</li>'; 
       } 
      posts += '</ul>'; 
     // Append each list of posts to #devotionlist in html page 
     $("#devotionlist").append(posts); 
     //$("#devotionlist").listview('refresh'); 
     } 
    }); 
} 
google.setOnLoadCallback(initialize); 

내가 본 몇 가지 코드를 시도했지만 아무도 내가 한

+0

누구나 아이디어가있는 사람이거나이 샘플에서 $ .ajax를 사용하여 코드를 다시 작성해야합니다 : $ .ajax ({ beforeSend : function() {$ .mobile.showPageLoadingMsg(); }, // 스피너 표시 complete : function() {$ .mobile.hidePageLoadingMsg()}, // 스피너 숨기기 – Chelseawillrecover

답변

0

확인하는 가장 간단한 방법을이 알아낼 ... 나를 위해 작동하지 않습니다.

function showPost(id) { 
    $('#articlecontent').html('<div id="ui_loader"><img src="css/images/ajax-loader.gif" class="ajax_loader"/></div>'); 
    $.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) { 
     var output=''; 
     output += '<h3>' + data.post.title + '</h3>'; 
     output += data.post.content; 
     $('#articlecontent').html(output); 

다음 CSS와 :

#ui_loader { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:1000; 
} 

.ajax_loader { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -32px; /* -1 * image width/2 */ 
    margin-top: -32px; /* -1 * image height/2 */ 
    display: block;  
} 

참고 : 나는 CSS에서 불투명도를 꺼내서 로더가보고 된 이후 나는 호출하고 각 게시물을 클릭 표시 기능에 다음 코드를 추가 너무 어둡고 너무 희색하여 투명도 설정을 높이거나 낮추면 투명 배경을 가진 새로운 로더를 생성하는 것이고 AJAX Loader Site