Languages

Menu
Sites
Language
header of web app isn't loaded properly

I have a web app with several pages, all of them have a Header, Content and footer. Each of them have an image background (images are the same for each page). At the first launching, content and footer background images loaded properly every time. The header background image didn't loading sometimes (hardly ever) or it have a delay with other elements and loading after 5-10 msec. When I move to the second page - all 3 backgrounds loading normaly, and when I go back to the first page, it also bacome normal. So I have two scenarios -

first:

  1. open app
  2. header background image is empty
  3. move to the second page - header backgroind imege is normal
  4. move back to the first page - header backgroind imege is normal

second:

  1. open app
  2. header background image is loading after 5-10 mseconds

How can I solve this? here is the link to the StackOwerflow question: http://stackoverflow.com/questions/22953493/tizen-header-of-web-app-isnt-loaded-properly?noredirect=1#comment35044465_22953493

List

Responses

3 Replies
Marco Buettner

You can try to minize the filesize of your png with a pngOptimizer, our use on GIMP/PS higher compression. Otherwise you can write a "Splashscreen"-function which is called while the first page are on initialize. Or maybe something like this:
 

$("#splashscreen").on("pageshow", function() {
    $.mobile.loadPage($("#one"));
    $.mobile.loadPage($("#second"));
    $.mobile.loadPage($("#third"));
    // and so on
});

$("selector of your last page").on("pageload", function() {
   $.mobile.changePage($("#one")); 
});

Dont forget to define splashscreen page before your page #one in the html structure.

Reborn

Thanks, but my header.png size in header is lower then content.png in the content section, and sometimes it loading properly (occasionally). I hope that this problem can be fixed in the html code, because there are no diffirence between footer.png and header.png, if not - it seems, that it's a Tizen OS bug.

Marco Buettner

I have a similar issues... Sometimes my two buttons on footer are shown sometimes only one...

I don't know how many simultaneous downloads are possible in Tizen... However, you can try my method above... I haven't time and technical equipment to test the method, but it can work.

Otherwise you can add the picture at the "pagebeforeshow" event with addClass("myheaderbackground"). Don't forget to define the class myheaderbackground on a css file.

PS: I would avoid inline styling.