0

对于 JQuery Mobile 站点，我需要在页面导航中加载新图像。图像仅显示在主屏幕上。

例如，您加载 m.smellyeggs.com，其中 image_A.png 作为顶部横幅。您选择菜单项 1，然后按返回，现在 image_B.jpg 显示为顶部横幅。

我能够使用cookie让它工作。我得到一组潜在图像，然后使用 cookie 遍历该数组。这适用于页面重新加载，但页面的任何缓存加载（例如 href="/" 或在移动设备或浏览器中使用“返回”）都不会调用 javascript。因此，图像实际上不会交替。

var images = new Array(); 
<% banner_mobile_uris( controller.conference ).each do |url| %>
  images.push( "<%= url %>" );
<% end %>

inc_banner_cookie();
load_banner();

为了解决这个问题，我使用了以下代码，它会删除图像，每当加载主页时强制刷新图像。

$( 'a' ).live( 'click', function( ev ){
  var banner = $('#m_banner').load(htm_file);
  banner.empty().remove();
});

此代码从发生的任何后续页面导航中删除“返回”按钮。

好吧，这是不可接受的！关于更好的方法的任何建议？除非绝对必要，否则我宁愿不实现自己的“后退”按钮。

感谢阅读（希望能有所帮助）。

4

1 回答 1

1

答案在于使用 pageinit 来检测成功的 JQuery Mobile 页面加载...

$(document).on('pageinit', function(){
    inc_banner_cookie();
    load_banner();
});

这不会禁用后退按钮。并导致在任何类型的页面导航上重新加载图像。嗯，几乎任何类型...

事实证明，当发生 AJAX 重定向时，这种方法很脆弱，并且后续的 pageinit 可能无法正常工作。请参阅我关于此问题的问题。

于 2013-07-10T18:28:31.327 回答