使用jQuery Mobile转换后的背景图像加载延迟

时间:2014-07-22 12:45:19

标签: javascript jquery css jquery-mobile cordova

我需要帮助在基于Cordova的Android和iPhone应用程序上使用jQuery Mobile解决图像背景问题 该应用程序由更多数据角色页面组成,当我在vclick上调用$ .mobile.changePage时,幻灯片转换下一页显示没有图像,这些仅在转换结束后放置。
如果重复转换问题得到解决,我认为因为图像是缓存的。

HTML

<div data-role="page" id="home" style="background-color: #FFFFFF; padding-top:-1px;">
   <div data-role="content" id="content_home">
       <h1>PAGE 1</h1>
       <ul data-role="listview">
          <li id="goto_page2"><a href="#">
             <h2>Click</h2>
          </a></li>
       </ul>
   </div>
</div>

<div data-role="page" id="page2">
    <div class='boo'>
        <img id='imgbkgr' style="background:none"></img>
    </div>
    <div data-role="content" id="content_page2">
         <h1>PAGE 2</h1>
         <ul data-role="listview">
            <li id="goto_home"><a href="#">
                <h2>Click</h2>
            </a></li>
         </ul>
     </div>
</div>

JS

$('#goto_page2').on("vclick", function(event, ui) {
    event.preventDefault();
    event.stopPropagation();
    $("#imgbkgr").attr("style","background:url('http://placekitten.com/300/300');height:300px;width:300px");
    $.mobile.changePage( "#page2", {
        transition: "slide",
        reverse: false,
        allowSamePageTransition: true;
    });
});

$('#goto_home').on("vclick", function(event, ui){
    event.preventDefault();
    event.stopPropagation();
    $.mobile.changePage( "#home", {
        transition: "slide",
        reverse: true,
        allowSamePageTransition: true
        });
});

此处显示示例http://jsfiddle.net/kpH4p/
PS:重复一下,只有在第一个可视化文件中才能看到问题,所以在再次查看之后,必须清除浏览器的缓存。 感谢。

0 个答案:

没有答案