×

Discussion Board

Results 1 to 4 of 4
  1. #1
    Registered User
    Join Date
    Jun 2010
    Posts
    1

    Loading Screen in WRT

    Hi,

    I've built a WRT App - it's simple a list of bands playing at a festival and details of them. It uses a jquery accordion script to show/hide band details. However, there are 83 bands and each has some text, and an image. Whilst development has been fine, when I finally put it on the handset (N97Mini) it took nearly 50 seconds to load.

    Therefore my questions are -

    - Is there a simple code example out there to put a loading screen on a WRT app?
    - Or, have I done my code wrong in that it's talking so long to load? The code from the index.html file is shown below - this is for one field (there are 82 others the same).
    - Should I be pre-loading images, or loading only on demand? Bear in mind I don't know how to do either!!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <TITLE>Nokia Recommends</TITLE>

    </HEAD><BODY style="background-color:#004787;">

    <SCRIPT type="text/javascript" src="accordion_files/jquery.js"></SCRIPT>
    <SCRIPT type="text/javascript" src="accordion_files/accordion.js"></SCRIPT>
    <SCRIPT type="text/javascript">
    jQuery().ready(function(){
    // applying the settings
    jQuery('#theMenu').Accordion({
    active: 'h3.selected',
    header: 'h3.head',
    alwaysOpen: false,
    animated: true,
    showSpeed: 200,
    hideSpeed: 400
    });


    jQuery('.xtraMenu').each(function(index) {

    $(this).Accordion({
    active: 'h4.selected',
    header: 'h4.head',
    alwaysOpen: false,
    animated: true,
    showSpeed: 200,
    hideSpeed: 400
    });
    });

    jQuery('h3.head').each(function(index) {

    $(this).bind('click', function() {
    jQuery('ul.band_info').hide();
    jQuery('ul.xtraMenu h4.head').removeClass('selected');
    });
    });


    });
    </SCRIPT>

    <style type="text/css">

    a:link, a:visited {
    text-decoration: none;
    }

    body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    h3.head a{
    color:#ffffff;
    }

    div.band_info{
    color:#004787;
    }

    ul.headline a{
    color:#004787;
    }

    h3.head{
    background:url("styles/greybg.png") repeat-x scroll 50% 50% #EDEDED;
    cursorointer;
    font-weight:bold;
    font-size:20px;
    font-family:Verdana, Geneva, sans-serif;
    margin-bottom:0px;
    padding:5px;
    text-transform:uppercase;
    color:#ffffff;
    border:1px solid #004787;
    }



    h3.selected{
    background:url("styles/selected.png") repeat-x scroll 50% 50% #8AB61C;
    color:#FFFFFF;
    height:20px;
    text-decoration:none;
    border :none
    }

    h3.selected a{
    color:#FFFFFF;
    text-decoration:none;
    }

    h4.head{
    background:url("styles/blackbg.png") repeat-x scroll 50% 50% #8AB61C;
    color:#ffffff;
    padding:5px;
    margin:0px;
    }

    h4.head a{
    text-decoration:none;
    font-family:Verdana, Geneva, sans-serif;
    color:#ffffff;
    }

    h4.selected{
    background:url("styles/selected.png") repeat-x scroll 50% 50% #8AB61C;
    border:1px solid #004787;
    color:#FFFFFF;
    /*height:20px;*/
    text-decoration:none;
    }

    h4.selected a{
    color:#ffffff;
    }

    ul#theMenu{
    list-style-type:none;
    padding:0px;
    margin:0px;
    text-align: left;
    }



    ul#theMenu ul{
    list-style-type:none;
    }

    ul#theMenu li.topact{
    padding:0px;
    margin:0px;
    }

    li.band_info_hold{
    border:#004787 1px solid;
    margin-bottom:3px;
    background:#ffffff;
    float:left;
    width:98%;
    }

    ul.band_info{
    padding:0px;
    margin:0px;
    }

    ul.headline{
    background:#ececec;
    padding:10px;
    margin:0px;
    }

    ul.xtraMenu{
    padding:0px;
    margin:5px;
    float:left;
    width:98%;
    }

    li.bandprofile{
    margin-top:10px;
    }

    div.nokiarecommends{
    width:100%;
    background:#004787;
    text-align: left;
    }

    div.toptext{
    text-align: left;
    color:#ffffff;
    font-family:Verdana,Geneva,sans-serif;
    font-size:18px;
    padding-left:6px;
    padding-bottom:5px;
    }

    div.artisttext{
    text-align: left;
    color:#004787;
    font-family:Verdana,Geneva,sans-serif;
    font-size:18px;
    padding-left:6px;
    padding-bottom:5px;
    padding-right:5px;
    }

    div.footertext{
    text-align: left;
    color:#ffffff;
    font-family:Verdana,Geneva,sans-serif;
    font-size:12px;
    padding-left:6px;
    padding-bottom:5px;
    }

    div.headliner h4.head{
    background:url("styles/selected.png") no-repeat scroll 50% 50% #8AB61C;
    border:1px solid #004787;
    font-family:Verdana,Geneva,sans-serif;
    font-size:20px;
    font-weight:bold;
    height:23px;
    padding-top:5px;
    text-decoration:none;
    }

    div.headliner h4.head a{
    text-decoration:none;
    }

    div.topimg {
    overflow: hidden;
    padding-right: 0px;
    }

    img {
    padding-right: 5px;
    }

    li.topact{
    background:#004787;
    float:left;
    width:98%;
    }

    div.headliner{
    background:none repeat scroll 0 0 #ffffff;
    float:left;
    margin-bottom: 5px;
    }
    </style>

    <div class="nokiarecommends">
    <div class="topimg">
    <img src="styles/logo-recommends.png" />
    </div>
    <div class="toptext">
    Touch the name of an artist to view further details, on-stage details, and up to 3 other similar artists recommended to see at Oxegen 2010
    </div>
    <ul id="theMenu">

    <li class="topact">
    <h3 class="head" style="margin:0px"><a href="#acc">FATBOY SLIM</A></H3>


    <div class="headliner">
    <img src="accordion_files/fbslim.jpg" align="left" />
    <div class="artisttext">Fatboy Slim, is an English DJ, big beat musician, record producer and pioneer of the electronic dance genre.
    </div></div>
    <div class="toptext">If you like the above artist, then Nokia also recommends...
    </div>
    <ul class="xtraMenu">
    <li class="band_info_hold">
    <H4 class="head"><A href="javascript:;">30 SECONDS TO MARS</A></H4>
    <ul style="display: none;" class="band_info">
    <li class='bandprofile'>
    <img src="accordion_files/30seconds.jpg" align="left" />
    <div class="artisttext">30 Seconds to Mars is an American rock band from Los Angeles, formed in 1998. Since 2007, the band has been composed of actor Jared Leto (lead vocals, rhythm guitar, songwriter), Shannon Leto (drums, percussion) and Tomo Miličević (lead guitar, keyboards). </div>
    </li>
    </ul>
    </li>
    <li class="band_info_hold">
    <H4 class="head"><A href="javascript:;">PRODIGY</A></H4>
    <ul style="display: none;" class="band_info">
    <li class='bandprofile'>
    <img src="accordion_files/prodigy.jpg" align="left" />
    <div class="artisttext">The Prodigy are an English electronic dance music group established by Liam Howlett in 1990 in Braintree, Essex. Along with Fatboy Slim, The Chemical Brothers and The Crystal Method, as well as other acts, members of the Prodigy have been credited as pioneers of the big beat genre which achieved mainstream popularity in the 1990s and 2000s, and are known for high-quality live performances. They have sold over 20 million records worldwide which is unequalled in dance music history.</div>
    </li>
    </ul>
    </li>
    </ul>

    <div class="footertext">&copy; Nokia 2010 Developed by MobaNode www.mobanode.com
    </div></div>

    </body></html>

  2. #2
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,405

    Re: Loading Screen in WRT

    Hi shaneymac,

    welcome to Forum Nokia Discussion Boards!

    Can you please tell which is the size of the remote XML/JSON you're trying to load, and the average size of images? Bear in mind that network connectivity, on mobile devices, is usually slower than on emulator environments, so you should always optimize remote resources' size.

    Coming to your questions:

    - Is there a simple code example out there to put a loading screen on a WRT app?
    * have you already checked Forum Nokia Wiki? It contains a lot of useful code snippets, and most probably you could find some code that could fit your needs.

    - Or, have I done my code wrong in that it's talking so long to load? The code from the index.html file is shown below - this is for one field (there are 82 others the same).
    * So, you have replicated the same code for each of the 82 categories? If this is so, it is a wrong approach: replicating code, apart from being a non-maintainable approach (you have to replicate each small change in each of the 82 pieces) could be one of the causes of the slowness you're experiencing, since it considerably increases the size of your widget. You could consider to dynamically generate your 82 snippets with a JavaScript function, and a simple loop.

    - Should I be pre-loading images, or loading only on demand? Bear in mind I don't know how to do either!!
    * It highly depends on the widget you're building: there's not an universally right or wrong approach. Usually, a middle approach consist in preloading just a small set of resources, and then continue preloading small sets as you need it.

    Also, be sure to read this article, as it contains most of best practices to optimize performances of your widgets:

    http://wiki.forum.nokia.com/index.ph...Best_Practices

    Pit

  3. #3
    Registered User
    Join Date
    Apr 2009
    Posts
    9

    Re: Loading Screen in WRT

    I am using a technique some may find useful to show a splash screen.

    First, on the HTML body I add a class, eg: "splash", and on a <style> block I just create 2 rules to define the splash image as background to the body and to hide everything on the page:

    <style type="text/css" media="screen">
    body.splash { background: #eee url('images/splash.png') no-repeat fixed center center; }
    body.splash * { display: none !important; }
    </style>

    I use a 360x360 image as splash to cope with orientation. You can use bigger image but remember the corners outside the central 360x360 will be hidden.

    Then, I use a javascript loader to load the js/css files. You don't need to do this, but I think it helps somewhat to ease the process. My html file is just a minimal stub to set this splash screen and start the loading process.

    When you are ready to show the app, just remove the "splash" class of the body, and you are ready.

    $("body").removeClass("splash");

    Hope it helps.

  4. #4
    Registered User
    Join Date
    Aug 2011
    Posts
    10

    Re: Loading Screen in WRT

    Quote Originally Posted by pcardoso View Post
    I am using a technique some may find useful to show a splash screen.

    First, on the HTML body I add a class, eg: "splash", and on a <style> block I just create 2 rules to define the splash image as background to the body and to hide everything on the page:

    <style type="text/css" media="screen">
    body.splash { background: #eee url('images/splash.png') no-repeat fixed center center; }
    body.splash * { display: none !important; }
    </style>

    I use a 360x360 image as splash to cope with orientation. You can use bigger image but remember the corners outside the central 360x360 will be hidden.

    Then, I use a javascript loader to load the js/css files. You don't need to do this, but I think it helps somewhat to ease the process. My html file is just a minimal stub to set this splash screen and start the loading process.

    When you are ready to show the app, just remove the "splash" class of the body, and you are ready.

    $("body").removeClass("splash");

    Hope it helps.
    Hi, I am facing the same problem. Can you explain more detail on $("body").removeClass("splash"); in full code snippet? I am newbie to javascript.

Similar Threads

  1. loading screen
    By twtb in forum Mobile Java General
    Replies: 1
    Last Post: 2010-05-09, 16:39
  2. Replies: 2
    Last Post: 2010-02-19, 10:49
  3. WRT on Home screen
    By cprice in forum Symbian
    Replies: 1
    Last Post: 2010-02-04, 06:57
  4. WRT Issue: Moving from home to full screen
    By mshita in forum Symbian
    Replies: 2
    Last Post: 2009-08-24, 18:24
  5. problem loading wrt widget in emulator
    By asshaikh432 in forum Symbian
    Replies: 4
    Last Post: 2009-05-06, 13:00

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •