I need help to solve that issue with image background using jQuery Mobile on a Cordova based app for Android and iPhone.
The app is composed by more data-role page, when i call the $.mobile.changePage on vclick with slide transition next page appears without images, these are placed only after the conclusion of the transition.
If the transition is repeated the problem is resolved, i think because the images are cached.
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
});
});
The example is showed here http://jsfiddle.net/kpH4p/
PS: repeat that the problem is visible only on the very first visualization, so after to see it again it's necessary clear the browser's cache.
Thanks.