我需要帮助在基于Cordova的Android和iPhone应用程序上使用jQuery Mobile解决图像背景问题
该应用程序由更多数据角色页面组成,当我在vclick上调用$ .mobile.changePage时,幻灯片转换下一页显示没有图像,这些仅在转换结束后放置。
如果重复转换问题得到解决,我认为因为图像是缓存的。
<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>
$('#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:重复一下,只有在第一个可视化文件中才能看到问题,所以在再次查看之后,必须清除浏览器的缓存。
感谢。