在加载时刷新包含动态内容的静态页面

Posted 2021-04-05

我有一个正常加载的静态页面，然后它的'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

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

答案

这是个问题。

由于在正确的页面加载事件期间未触发ajax调用，因此在第一页加载期间，滑动事件未绑定，因为页面未加载到DOM中。

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

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

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