0

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.

Community
  • 1
  • 1
CarloM_dtb
  • 21
  • 2
  • 8
  • If you want image to be loaded before changing page, you should use preload image or use someone's plugin/library for detecting image "isLoaded" and change page when image is loaded. Some plugins can be found [here](http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded) – Regent Jul 22 '14 at 13:12
  • Thanks but this don't work for me. If you look at the jfiddle example the images are shown only after the transition, but it's not a loading problem. Background is show after the transition even if i put it statically in html and not with js execution. – CarloM_dtb Jul 23 '14 at 22:50
  • I've noticed that there is a workaround, change transition from slide to flip will remove this delay, but i don't like this solution, the whole application has slide transition, i can't make one single page with flip trasition – CarloM_dtb Jul 23 '14 at 22:56
  • I didn't find a solution for this. The only thing I came to is to set image src statically in HTML: http://jsfiddle.net/kpH4p/13/ – Regent Jul 24 '14 at 06:24

0 Answers0