/    Sign up×
Community /Pin to ProfileBookmark

Preloading Images, Then calling for them

Copy linkTweet thisAlerts:
May 01.2003

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.

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisMay 01.2003 — 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.
Copy linkTweet thisAlerts:
@togetslimauthorMay 01.2003 — 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>
Copy linkTweet thisAlerts:
@gil_davisMay 02.2003 — [b]What am I doing wrong?[/b][/quote]This:<body>

<script language="javascript" type="text/javascript">

changeIMG()

</script>[/quote]You are trying to change the SRC of an object that does not exist yet. Change it to&lt;body onload="changeIMG()"&gt;and eliminatedocument.write("ILA")[/quote] from the script and it ought to work.
Copy linkTweet thisAlerts:
@togetslimauthorMay 05.2003 — 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?
Copy linkTweet thisAlerts:
@gil_davisMay 05.2003 — 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.
Copy linkTweet thisAlerts:
@togetslimauthorMay 05.2003 — do you know how to change the background pic or image?
Copy linkTweet thisAlerts:
@gil_davisMay 06.2003 — 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
Copy linkTweet thisAlerts:
@togetslimauthorMay 07.2003 — 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 );
Copy linkTweet thisAlerts:
@gil_davisMay 07.2003 — 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.
Copy linkTweet thisAlerts:
@togetslimauthorMay 07.2003 — 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
×

Success!

Help @togetslim spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...