PDA

View Full Version : problem in code with image loading


cat_evilness
01-26-2003, 01:28 PM
Okay, here's my problem. Below is a link to the virtual pet that I'm making:

http://cat_evilness.tripod.com/main.html

Now what's suppose to happen is that when the counters at the side go below 10 the user clicks a button (note feed and play are the ones that should work at the moment) the numbers go up at the side and an animated gif plays where the cat is. Say if you push feed the cat starts eating. But for some reason the gif doesn't load on the first press or sometime not at all. Does anyone have any idea what the problem is?

Thanks for all your help,
Cat x

Here is the code:

<html>
<head>
<script language="javascript" type="text/javascript" src="chromeless_35.js"></script>
<script language="javascript">
function openIT(u,W,H,X,Y,n,b,x,m,r) {
var cU ='close.gif' //gif for close on normal state.
var cO ='close.gif' //gif for close on mouseover.
var cL ='clock.gif' //gif for loading indicator.
var mU ='minimize.gif' //gif for minimize to taskbar on normal state.
var mO ='minimize.gif' //gif for minimize to taskbar on mouseover.
var xU ='max.gif' //gif for maximize normal state.
var xO ='max.gif' //gif for maximize on mouseover.
var rU ='restore.gif' //gif for minimize on normal state.
var rO ='restore.gif' //gif for minimize on mouseover.
var tH ='<font face=verdana size=2>Virtual Paws: Kitty</font>' //title for the title bar in html format.
var tW ='Virtual Paws' //title for the task bar of Windows.
var wB ='#D5D5FF' //Border color.
var wBs ='#D5D5FF' //Border color on window drag.
var wBG ='#D5D5FF' //Background of the title bar.
var wBGs='#D5D5FF' //Background of the title bar on window drag.
var wNS ='toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0' //Html parameters for Netscape.
var fSO ='scrolling=auto noresize' //Html parameters for main content frame.
var brd =b||5; //Extra border size.
var max =x||false; //Maxzimize option (true|false).
var min =m||false; //Minimize to taskbar option (true|false).
var res =r||false; //Resizable window (true|false).
var tsz =20; //Height of title bar.
return chromeless(u,n,W,H,X,Y,cU,cO,cL,mU,mO,xU,xO,rU,rO,tH,tW,wB,wBs,wBG,wBGs,wNS,fSO,brd,max,min,res,tsz)
}
</script>
<title>Virtual Paws - Kitty Version 1.5 #FF9933</title>
</head>
<body bgcolor="#0099FF" background="bk1.jpg" text="#FFFFFF" link="#FF9933" vlink="#FF9933" alink="#FF9933">
<table width="700" valign="top" border="0">
<td width="450" bgcolor="" valign="top" align="top" border="">
<div align="center"><img src="vpaws1.gif"></div>
<font color="white">
Welcome to the Virtual Paws website, the Pet Shop. From here you can adopt your very
own virtual pet. There are a range of pets available and adopting one in easy. Simply
choose a pet from the selection on the right and press *begin* to adopt. Easy! </font>
</td>
<td width="300" valign="top" align="center" border="0">
<table width="280" bgcolor="#003399" valign="top" border="0">
<td width="150" bgcolor="#FF9933" valign="top" align="top" border="">
<div align="center"><big><font color="#66FF99">Kitty</font></big></div>
<div align="center"><font color="white">Adopt your very own little virtual kitty cat. Includes feed, play and more.</font></div>
<p><a href="#" onclick="mywin001=openIT('intro.html',600,400,null,null,'mywin001',5,true,true,true);return false">
<div align="center"><img src="beginbutton.gif"></div></a>
</td>
<td width="130" bgcolor="#FF9933" valign="top" align="center" border="0">
<br>
<img src="kitty.gif">
</td>
</table>
<br>
<table width="280" bgcolor="#003399" valign="top" border="0">
<td width="150" bgcolor="#FF9933" valign="top" align="top" border="">
<div align="center"><big><font color="#66FF99">Doggy</font></big></div>
<div align="center"><font color="white">Look after your very own doggy - feed him, take him for walks and teach him tricks.</font></div>
<br>
<div align="center"><big><font color="#FFFFFF">Coming Soon!</font></big></div>
</td>
<td width="130" bgcolor="#FF9933" valign="top" align="center" border="0">
<br>
<img src="doggy.gif">
</td>
</table>
</td>
</table>
</body>
</html>

Jimbo
01-26-2003, 05:57 PM
Whenever I have used an external .js file, any scripts that I had directly on the page did not work....:confused:

japangreg
01-27-2003, 06:19 PM
Hey, Cat_evilness. Cute game; virtual pets can be a challenging project.

I'm not very good with JavaScript myself, but shouldn't you pre-load the images? It looks to me like the browser isn't loading them until the mouse is clicked, so there's a delay while they are downloaded. Try adding:


var cU = new Image();
cU.src = 'close.gif';
ect....


If this is way off base, sorry, I'm still learning myself. :)

hth
japangreg

ConfusedOfLife
01-27-2003, 06:34 PM
I think preloading images does the trick. :D

Tails
01-27-2003, 08:18 PM
Yea, really cute game. I like it. I wanna make one for my pets, but I am new to them. What are the basic rules for taking care of them? I'd make it detailed enough that it would hold grudges and maybe if I learn cgi or something, there'd be a way to save and load pets and user settings.