jquery mobile 1.3.1 padding-top 在初始页面加载时计算不正确

Question

我已经在谷歌上搜索了好几天，虽然有很多类似的主题，但我仍然无法找到答案。我已将问题简化为：

<div data-role="header" data-id="myHeader" data-theme="none" data-position="fixed">
        <img src="images/my1200x150logo.jpg"/>
</div><!-- /header -->

<div data-role="content">
    <p>Content line 1</p>
    <p>Content line 2</p>
    <p>Content line 3</p>
    <p>Content line 4</p>
    <p>Content line 5</p>
</div><!-- /content -->

<div data-role="footer" data-id="myFooter" data-theme="c" data-position="fixed"> 
  <h4>My footer</h4>
</div><!-- /footer -->

我正在尝试通过调整徽标图像大小以适应页面来实现 RWD 效果。这一切都很完美，除了初始页面加载，它在 jqm updatePagePadding 例程中将 padding-top 设置为零，导致内容在图像下向上流动。

我了解图像会在 js 运行数小时后加载，这是一个常见问题。任何事件（例如页面调整大小）都会导致填充正确更新。

所以我的问题是，我如何强制 JQM 在我的图像完成加载后调用 updatePagePadding？

Answer 1

Jquery 页面显示事件？ link to the API

基本上jquery会在页面加载完成后触发一个事件，并且元素准备好你可以等待那个事件然后调用你的函数，例如：

$("#pageID").on("pageshow",function(){
   updatePagePadding();
});

还可以查看此以获取有关绑定到每个 jquery 移动页面的事件的完整参考，page widget API