/    Sign up×
Community /Pin to ProfileBookmark

Preloading Images

Copy linkTweet thisAlerts:
Aug 01.2003

I’ve done it before for rollovers but i forget how to preload images. How would i preload this Array? And also, I made a next() function, and you can click Manual Flip which calls the next() and then click autoflip but you cant click autoflip then manual… how can i turn off autoflip when some clicks manual flip?

<html><head><title>Animated Sk8</title>
<script type=”text/javascript” language=”javascript”>
<!– Hide script from old browsers

adImages = new Array(“grind1.gif”,”grind2.gif”,”grind3.gif”,”grind4.gif”,”grind5.gif”,”grind6.gif”,”grind7.gif”,”grind8.gif”,”grind9.gif”,”grind10.gif”,”grind11.gif”,”grind12.gif”,”grind13.gif”,”grind14.gif”,”grind15.gif”)
thisAd = 0
nextAd = 0
imgCt = adImages.length

function rotate() {
if (document.images) {
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}
document.flipBook.src=adImages[thisAd]
setTimeout(“rotate()”, 2 * 100)
}
}

function next() {
nextAd++
if (nextAd == imgCt) {
nextAd = 0
}
document.flipBook.src=adImages[nextAd]
}
// End hiding script from old browsers –>

</script>
<style type=”text/css”>
body {
cursor: crosshair;
}
</style>
</head>
<body bgcolor=”white”>
<img src=”grind1.gif” width=”586″ height=”153″ name=”flipBook” id=”flipBook” alt=”Flip Book!” />
<br />
<button onClick=”rotate()”>Auto Flip</button>
<button onClick=”next()”>Manual Flip</button>
<br />
MADE BY CHRIS ELWELL</body>
</html>

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Phil_KarrasAug 01.2003 — Here's one way:
<i>
</i>function preload() {
for (i=0; i&lt;10; ++i) {
a[i] = new Image
a[i].src = "BaseName" + i + ".gif";
}
}
.
.
.
&lt;/script&gt;
&lt;/head&gt;

&lt;body onLoad="preload();"&gt;
Copy linkTweet thisAlerts:
@The_Air_StrangeAug 01.2003 — I'm having a problem with the way I pre-loaded my images. There still seems to be a delay. In fact, I get a message that the image is downloading.

Here is a link to the page I am having trouble with: http://theairstrange.devbox.net/start.html

Thanks,

Culley
Copy linkTweet thisAlerts:
@Phil_KarrasAug 01.2003 — I don't look at other people's pages unless I'm being paid to do

so, I am a consultant, however:

If you want to put some of your code here, make a [b]KISS [/b]

example ([color=blue]Keep It Short & Simple[/color]) make sure it

"works" the way it needs to in order to demonstrate the problem.

Remember, we are helping for free so the bulk of the work must be

done by you to help us help you.

All I can say about the code I posted is that I have used it in a

little program with multiple images of a mouse running around the

screen. All images are loaded BEFORE any action begins and this

code works fine.

If you need to "pre-load" images BEFORE the page even loads, then

DON'T make it a function, leave it in the open and use

document.write in <script> tags in the HTML to pick up the pre-

loaded images, as needed.
Copy linkTweet thisAlerts:
@The_Air_StrangeAug 01.2003 — Sorry ?

I guess I was just being a bit lazy.

Here is where I load the images in the <head>:

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

MouseOverImage = new Image(430,418)

MouseOverImage.src = "/Images/ImageName1.jpg"

MouseOutImage = new Image(430,418)

MouseOut.src = "/Images/ImageName2.jpg"

</script>

Then, in the body, here is how I rollover the image:

<a href="MyPage.html"

onmouseover="document.startpic.src=MouseOverImage.src"

onmouseout="document.startpic.src=MouseOutImage.src">

Link</a>

<img src="/Images/ImageName2.jpg"

name="startpic" border="0"

width="430" height="418">

Thank you for your time,

Culley
Copy linkTweet thisAlerts:
@Phil_KarrasAug 01.2003 — ANd you're saying that doing it this way does not work?

Are your script tags in the <head> section of the HTML page?

Are you [b]SURE[/b] you have the right path to the images?

Are you [b]SURE[/b] you need that leading [b]"/"[/b]?
Copy linkTweet thisAlerts:
@The_Air_StrangeAug 01.2003 — It works. I mean, the images show up when I rollover the corresponding text, it's just sort of slow.

I've checked other pages out with the same sort of setup and the files are even larger, but the rollover effect is smooth.

Maybe I should try the onload function you have laid out and see if I have better results.

Or, maybe it's my server's response time.

Thanks,

Culley
Copy linkTweet thisAlerts:
@Phil_KarrasAug 01.2003 — It should have nothing to do with the server since the whole reason for pre-loading images is to get them into RAM on your computer so there is NO delay when switching.

The problem is probably that you are not pre-loading them, even tho' it sure looks like you're doing the right things here. I sure don't see the problem.

Try:
<i>
</i>MouseOverImage = new Image;
MouseOverImage.src = "/Images/ImageName1.jpg";
MouseOutImage = new Image;
MouseOut.src = "/Images/ImageName2.jpg";

& tell us what happens.
×

Success!

Help @elwell 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,
)...