在带有Phonegap的Onsen UI上加载<ons-tabbar>时添加预加载图像?</ons-tabbar>

时间:2014-11-18 11:46:45

标签: jquery ios iphone cordova onsen-ui

现在我正在使用Onsen UI和Phonegap(Cordova)制作iPhone应用程序。

当我从<ons-tabbar>打开新页面时,在新页面出现之前屏幕上会有一点闪光。

所以任何人都知道如何在新页面显示之前添加加载图像以使其看起来比以前更平滑,或者其他解决方案使其看起来更好?

这是我的一些代码:

<ons-tabbar class="tab-wrapper">
      <ons-tab class="first-footer-button" page="feeds-index.html" active="true">
        <!-- <ons-icon icon="ion-home"></ons-icon> -->
        <img src="img/icon/feeds_icon.png" alt="">
        <span>Feeds</span>
      </ons-tab>
      <ons-tab page="recents-index.html">
        <!-- <ons-icon icon="ion-star"></ons-icon> -->
        <img src="img/icon/recents_icon.png" alt="">
        <span>Recents</span>
      </ons-tab>
      <ons-tab page="settings.html">
        <!-- <ons-icon icon="ion-gear-a"></ons-icon> -->
        <img src="img/icon/profile_icon.png" alt="">
        <span>Profile</span>
      </ons-tab>
      <ons-tab page="settings.html">
        <!-- <ons-icon icon="ion-gear-a"></ons-icon> -->
        <img src="img/icon/history_icon.png" alt="">
        <span>History</span>
      </ons-tab>
      <ons-tab page="settings.html">
        <!-- <ons-icon icon="ion-gear-a"></ons-icon> -->
        <img src="img/icon/setting_icon.png" alt="">
        <span>Setting</span>
      </ons-tab>
</ons-tabbar>

1 个答案:

答案 0 :(得分:0)

Onsen UI 1.2.0中添加了ons-loading-placeholder属性。

可以按如下方式使用:

<div ons-loading-placeholder="page.html">
  Loading...
</div>

您可以在<div>内添加一些动画。