與負載

Question

動態內容刷新靜態頁面我有一個靜態頁面加載正常，然後它的background-image使用AJAX和JSON改變動態。當用戶向左/向右滑動或使用下一個/上一個按鈕時，背景會發生變化。

一切都很好，但除非我刷新頁面（F5）時頁面啓動時不顯示照片。我嘗試了很多方法，包括.trigger('refersh')和.page('refresh')，但都失敗了。

我有下面的代碼來加載相同的頁面，每當用戶向左或向右滑動或使用導航按鈕。

function animation() { 
$.mobile.changePage("#gallery", { // #galley is the static page ID. 
allowSamePageTransition: true, 
changehash: false, 
transition: "flow" 
}); 
} 

和這個顯示加載ajax。

function showmsg() { 
$.mobile.showPageLoadingMsg() 
setTimeout(function() { 
    $.mobile.hidePageLoadingMsg() 
    }, 500); 
} 

HTML

<div data-role="page" class="demo-page" id="gallery"> 

<div data-role="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false"> 
    <h1>Photos Gallery</h1> 
</div><!-- /header --> 

<div data-role="content"> 
</div><!-- /content --> 

<div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false"> 
    <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true"> 
     <a href="#" class="prev" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="d">Previous</a> 
     <a href="#" class="next" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="d">Next</a> 
    </div> 
</div><!-- /footer --> 
</div><!-- /page --> 

AJAX和JQM

var ID = $('#displayid').val(); 
$.ajax({ 
Type: "GET", 
url: 'photos.php', 
data: { display: ID }, 
dataType: "json", 
contentType: "application/json", 
success: function(data) { 
    var first = "url('" + data.items[0] + "')"; 
    $('[data-role="page"]').css({'background-image': first }); 
    var count = data.count - 1; 
    var last = "url('" + data.items[count] + "')"; 
    console.log("last img " +data.items[0]); 
    console.log("last img " +data.items[count]); 
    console.log("number of photos " + count); 
    var img = 0; 
    var page = $(this); 

    // Swipe events 
    $('body').on('swiperight swipeleft', page, function (event){ 
     if (event.type == "swipeleft") { 
      if (img == count) { $('[data-role="page"]').css({'background-image': first }); img = 0; } 
      else { img++; } 
      if (img >= 0 && img <= count) { 
     var bg = "url('" + data.items[img] + "')"; 
     animation(); 
     showmsg(); 
     $('[data-role="page"]').css({'background-image': bg }); 
     } //if img 
     } //if left 
     if (event.type == "swiperight") { 
      if (img == 0) { $('[data-role="page"]').css({'background-image': last }); img = 9; } 
      else { img--; } 
      if (img >= 0 && img <= count) { 
     var bg = "url('" + data.items[img] + "')"; 
     animation(); 
     showmsg(); 
     $('[data-role="page"]').css({'background-image': bg }); 
     } //if img 
     else { $('[data-role="page"]').css({'background-image': first }); img = 1; } 
     } //if right 
    });// swipe event 

    // .next & .prev events 
$('.next').on('click', page, function(){ 
    $(page).addClass("slidedown"); 
    if (img == count) { $('[data-role="page"]').css({'background-image': first }); img = 0; } 
      else { img++; } 
      if (img >= 0 && img <= count) { 
     var bg = "url('" + data.items[img] + "')"; 
     animation(); 
     showmsg(); 
     $('[data-role="page"]').css({'background-image': bg }); 
} 
}); // .next 
$('.prev').on('click', page, function(){ 
      if (img == 0) { $('[data-role="page"]').css({'background-image': last }); img = 9; } 
      else { img--; } 
      if (img >= 0 && img <= count) { 
     var bg = "url('" + data.items[img] + "')"; 
     animation(); 
     showmsg(); 
     $('[data-role="page"]').css({'background-image': bg }); 
     } //if img 
     else { $('[data-role="page"]').css({'background-image': first }); img = 1; } 
}); // .prev 
} // success 
}); //ajax 

我怎麼能刷新初始加載的頁面，以顯示圖像，或我將改變靜態帶有系統的頁面生成一個？

現場演示here。

Answer 1

這是一個問題。

因爲在正確的頁面加載事件期間未觸發ajax調用，所以在第一頁加載期間，由於頁面未加載到DOM中，所以刷新事件未被綁定。

在刷新（secon頁面加載）頁面已經在DOM中，一切工作正常。

要解決此問題，換你的Ajax調用這個：

$(document).on('pagebeforeshow', '#gallery', function(){  
    //your ajax call should go here 
});