These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:23 pm Advanced search

Delay when loading ?

If you are stuck or have questions regarding HTML or other Web technologies, ask your questions here. No question too dumb!

Delay when loading ?

Postby qwerty777 » Fri Jun 08, 2012 2:17 pm

Hi guys, Im new in this HTML 5 so I do apologise if my questions could be a bit shallow :)

In my interface I want to put an animated picture (moving from right to left) on top of the screen and then 2 static pictures in the bottom of the screen. This is the code:

Code: Select all
<style type="text/css">
#div1 {width:800px;height:70px;padding:10px;border:10px solid #aaaaaa;}
</style>
<script type="text/javascript">
var data = { 'img1': { 'imgheight' :100, 'imgwidth' : 100, 'x' : 250,'y' : 10, 'image' : 'animatepic.png' } };
</script>

</head>
<body>
<div style="width:100%;height:100%;border:1px solid blue;" align="center">
   <canvas id="canvas" width="800px" height="100px" style="border:1px solid red;"></canvas>
   <canvas id="canvascharacter" width="800px" height="800px"></canvas>
</div>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
var ctxcharacter = document.getElementById('canvascharacter').getContext('2d');
ctx.textAlign="right";

function init()
{
   //scene1
   scene1();
}

function scene1()
{
   //drawthe characters and conversation
   drawcharscene1();
   
   //draw the animated airplane
//   setInterval(startTask,1);
}

function drawcharscene1()
{
   drawImage('characters',10,300,100,100,'character1.png');
   drawImage('characters',150,300,100,100,'character2.png');

}

function clear()
{
   ctx.clearRect(0,0,500,500);
}

function drawImage(whichimage,x,y,imgwidth,imgheight,url)
{
   img = new Image();
   img.src = url;
   if(whichimage=='animpic')
      ctx.drawImage(img,x,y,imgwidth,imgheight);
   else
      ctxcharacter.drawImage(img,x,y,imgwidth,imgheight); 
}

function startTask()
{
   clear();
   drawImage('animpic',data['img1']['x'],data['img1']['y'],data['img1']['imgwidth'],data['img1']['imgheight'],data['img1']['image']);

   if(data['img1']['x']>0)
   {
      data['img1']['x'] -=1;
      if(data['img1']['y'] < 5)
      {
         data['img1']['y'] +=1;
      } else {
         data['img1']['y'] -=1;
      }
   } else   {
      data['img1']['x'] =250;
   }
}

window.onload = function()
{
   init();
}
</script>
</body>


There are a few issues with this:
1. When I open the HTML file, sometimes the character pictures failed to show up so I have to refresh the page then the pictures will come out. Any ideas on how to make it all appear at the same time ?
2. After I leave the page open for a while, it seems the page becomes heavier and heavier (and I notice that my computer is processing something) to navigate. At some point, it even crash. Any suggestion on this please ?


Thank !! :)
qwerty777
<h6>
 
Posts: 1
Joined: Mon May 14, 2012 9:18 pm

Re: Delay when loading ?

Postby zcorpan » Sat Jun 16, 2012 12:03 pm

You need to wait until the image has loaded before calling ctx.drawImage().
Code: Select all
img.onload = function() { ctx.drawImage(img); };
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden


Return to Help & Advice

Who is online

Users browsing this forum: No registered users and 0 guests