Loading Screen in WRT

**shaneymac** · 2010-06-29, 21:54

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;
cursor

ointer;
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">© Nokia 2010 Developed by MobaNode www.mobanode.com
</div></div>

</body></html>

**jappit** · 2010-06-30, 09:27

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

**pcardoso** · 2010-06-30, 11:17

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.

**hrr** · 2011-11-22, 14:09

Originally Posted by pcardoso

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.

Discussion Board

Thread: Loading Screen in WRT

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

loading screen

what capabilities are required for loading a browser plugin in WRT?

WRT on Home screen

WRT Issue: Moving from home to full screen

problem loading wrt widget in emulator

Posting Permissions