3

我有一个静态页面，可以正常加载，然后使用AJAX和JSON动态background-image更改。当用户向左/向右滑动或使用下一个/上一个按钮时，背景会发生变化。

一切都很好，只是在页面启动时不会出现照片，除非我刷新页面 (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

我如何在初始加载时刷新页面以显示图像，或者我应该使用系统生成的页面更改静态页面？

4

1 回答 1

1

这是个问题。

因为在正确的页面加载事件期间没有触发 ajax 调用，所以在第一个页面加载期间没有绑定滑动事件，因为页面没有加载到 DOM 中。

在刷新（第二页加载）期间，页面已经在 DOM 中，一切正常。

要解决此问题，请将您的 ajax 调用包装到此：

$(document).on('pagebeforeshow', '#gallery', function(){      
    //your ajax call should go here
});
于 2013-03-04T16:45:59.617 回答