/    Sign up×
Community /Pin to ProfileBookmark

Preloading All Page Images

Copy linkTweet thisAlerts:
Apr 09.2005

Hey Yall how do i preload all the page images
even those to be shown “on mouseover” so that
the page visitor dosent have to waaaaaaaait for
the mouseover event (image change) to occur.
[URL=http://www.geocities.com/sunupshoestt/user.html]this is the web page address[/URL]

Albon

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@the_treeApr 09.2005 — Adapt this...[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>1 preloaded mousover</title>
<script type='text/javascript'>
<!--
mrimage = new Image();
mrimage.src = "on.gif";
//-->
</script>
</head>
<body>
<img id='mrimage' src='off.gif' onmouseover='this.src="on.gif";' onmouseout='this.src="off.gif";'>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@felgallApr 09.2005 — To preload images using HTML instead of Javascript simply code the images as follows immediately before the </body> tag of the previous page.

<img src="myimg.gif" style="width:0;height:0" width="1" height="1" alt="" />
Copy linkTweet thisAlerts:
@AlbonauthorApr 10.2005 — Wont this be enough somewhere in the <Body>

<BODY OnLoad="loadImages()">

Im no too good at the javascript thing

bear with me a while Lets say the event

images are (those that show on the mouseover event)

<image5.jpg , image6.jpg , image7.jpg , image8.jpg>

and the images that load with the page normally

<image1.jpg , image2.jpg , image1.jpg , image2.jpg>

OK good [URL=http://www.geocities.com/sunupshoestt/user.html]actual page in question[/URL]

[Q] how do I get <image5.jpg , image6.jpg , image7.jpg , image8.jpg>

to "preload" so that the delay on "mouseover" is shortened?

or am i worrying abou nothing>

Albon

Novice html guy
Copy linkTweet thisAlerts:
@the_treeApr 10.2005 — Adapt this...[/quote]Or I could just do it for you:foo = New Image();
foo.src = 'image5.jpg';
foo.src = 'image6.jpg';
foo.src = 'image7.jpg';
foo.src = 'image8.jpg';
Copy linkTweet thisAlerts:
@cthurowApr 11.2005 — Also turn on ur FRCA if you are using Apache. Then add those images into FRCA w/pageload & w/startup. This will allow for much faster image loading.
×

Success!

Help @Albon 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 6.15,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...