If you are attempting to write any type of game it is more than likely that you will want to show some images/sprites/animation. I've previously posted about "sprite sheets", but it is worth getting to grip with loading the necessary images in the first place.
What can possibly go wrong?
At first glance loading an image is easy; for example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>testing ...</h1>
<div id="demo_div">
</div>
<script type="text/javascript">
var my_image;
my_image=new Image();
my_image.src='bigcup.jpg';
var ele = document.getElementById('demo_div');
ele.appendChild(my_image);
</script>
</body></html>
The above will appear to work, but most likely the javascript has completed before the image is loaded, and although the image does appear to load - you are sure when it is ready.
Check it out:
http://www.advantsys.co.uk/demos/demos2
Obviously for a game this really isn't good; you can't start the game knowing half the graphics might not be loaded!
Using the "onload" callback
Fortunately there is a solution, but firstly you must understand the concept of asynchronous code execution and callbacks. For example say we want to make the image smaller once it has loaded, then you might attempt:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>testing ...</h1>
<div id="demo_div">
</div>
<script type="text/javascript">
var my_image;
my_image=new Image();
my_image.src='bigcup.jpg';
var ele = document.getElementById('demo_div');
ele.appendChild(my_image);
my_image.height=200;
my_image.width=200;
</script>
</body></html>
If you clear the browser cache (to ensure the image is reloaded), then try using the following link:
http://www.advantsys.co.uk/demos/demos3/
You should see the shrunken image is being loaded, rather than the large image loading and then shrinking! This is because certain features in JavaScript are asynchronous, in this instance:
my_image.src='bigcup.jpg';
This simply sets the name of the image and continues the script. Separately the browser will start loading the image, but the code continues to execute. Fortunately JavaScript can be made to indicate when the image has been loaded using the "onload" callback facility. For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>testing ...</h1>
<div id="demo_div">
</div>
<script type="text/javascript">
var my_image;
my_image=new Image();
my_image.onload=function() { my_image.height=200; my_image.width=200; };
my_image.src='bigcup.jpg';
var ele = document.getElementById('demo_div');
ele.appendChild(my_image);
</script>
</body></html>
Clear your browser cache and try the following link:
http://www.advantsys.co.uk/demos/demos4/
Now the image should load at the original size and only once loaded will it shrink to the smaller size. This happens because once the image has loaded JavaScript will see the property "onload" is set, and execute that code.
Part 2 will describe how to use the "onload" property of images to load all images for the game being developed and only continue once all images are loaded.
No comments:
Post a Comment