PDA

Click to See Complete Forum and Search --> : Preloading Images, Then calling for them

togetslim
05-01-2003, 02:50 AM
I am having trouble loading an image in the head commands and then calling for it in 4 different spots throughout the page. I think I am at least doing the first part right(head). I typed it as follows:

var TRB = new Image (22,22)
TRB.src = "../images/Images/topRgborder.bmp"

That part is in the Java Script and I am hoping I got it straight. Now, I need to call for the picture at 4 different places throughout the document, but I only want the picture "TRB" to load at the begining in the head commands. So, unless the first part is wrong, my question is: How do I call for that picture in the document so it appears on the page. Is there a way to call for "TRB" and have the picture stored as variable TRB appear.
Please help me, I'm new at JS.
gil davis
05-01-2003, 05:40 AM
If you have<img src="../images/Images/topRgborder.bmp" ... >somewhere in your HTML, then the preload is ignored. If you have something like this:<img name="i1" src="blank.gif" ... >
<img name="i2" src="blank.gif" ... >
<img name="i3" src="blank.gif" ... >
<img name="i4" src="blank.gif" ... >and then you have an onload script:function changeImg() {
document.images["i1"].src = TRB.src;
document.images["i2"].src = TRB.src;
document.images["i3"].src = TRB.src;
document.images["i4"].src = TRB.src;
}then the preload would work.

However, that is not the usual reason to use a preload script. You use it to load images that are not rendered in the default HTML - those images that are used as roll-overs or other effects.
togetslim
05-01-2003, 04:50 PM
What am I doing wrong?
<script language="javascript" type="text/javascript">
TRB = new Image (22,22)
TRB.src = "..Images/bottomLgborder.bmp"

function changeImg()
{
document.write("ILA")
document.images["i1"].src = TRB.src;
document.images["i2"].src = TRB.src;
document.images["i3"].src = TRB.src;
document.images["i4"].src = TRB.src;
}
</script>

</head>

<body>
<script language="javascript" type="text/javascript">
changeIMG()
</script>

<img name="i1" src="blank.gif">
<img name="i2" src="blank.gif">
<img name="i3" src="blank.gif">
<img name="i4" src="blank.gif">
</body>

</html>
gil davis
05-02-2003, 05:37 AM
What am I doing wrong?This:<body>
<script language="javascript" type="text/javascript">
changeIMG()
</script>You are trying to change the SRC of an object that does not exist yet. Change it to<body onload="changeIMG()">and eliminatedocument.write("ILA") from the script and it ought to work.
togetslim
05-05-2003, 09:27 AM
Thanks a ton, I really needed the help.
I do have another question regarding preloading an image. What if I also wanted image TRB.src to become the background pic in a table. Is there a way to use the preloaded pic "TRB.src" as the background?
gil davis
05-05-2003, 09:40 AM
I don't think so. An object's background image is a URL, and doesn't have a SRC. I can't tell if it really is different, but you definitely have to specify it differently.
togetslim
05-05-2003, 06:18 PM
do you know how to change the background pic or image?
gil davis
05-06-2003, 05:47 AM
document.getElementById(objId).style.backgroundImage = url(filename);where

objID - is a string that is the ID of the object
filename - is a string for the URL of the image
togetslim
05-07-2003, 06:23 AM
So if I have in the body:

<td height="22" background="blank.gif" id="t1">&nbsp;</td>

In the head:

RealT2 = new Image(22,22)
RealT2.src = "images/RealT2.bmp"

In the function:

document.getElementById(tl).style.backgroundImage = url(RealT2.src );
gil davis
05-07-2003, 06:47 AM
Almost.document.getElementById(tl).style.backgroundImage = 'url(' + RealT2.src + ')';

I'm just not sure how you would go about proving whether it used the cached file or had to go get it again.
togetslim
05-07-2003, 07:08 AM
That did it, thank you so much I needed that coding for so long. I appreciate all your help and patience with my uneducated (beginer javascripter) self.:) :)

Thanks a ton