Preload images not working

H

hoolie

I'm preloading images with the standard code:

default1 = new Image(); default1.src = "images/image1.gif";
changed1 = new Image(); changed1.src = "images/image1-on.gif";
default2 = new Image(); default2.src = "images/image2.gif";
changed2 = new Image(); changed2.src = "images/image2-on.gif";

And this is my rollover code:

var iName="";
function Ichange(p) {
var pSrc=eval(p+ ".src");
document[iName].src = pSrc;
}

But for some reason on the first mouseover it doesn't seem like the
image has been preloaded. There is a delay, like it's looking for the
rollover image, which should have already been preloaded. Anyone have
any ideas why?

Here is the inline code for a mouseover:
<a href="test.html" onMouseOver="iName='image1'; Ichange('changed1')"
onMouseOut="Ichange('default1')"><img src="images/image1.gif"
width="122" height="19" border="0" name="image1"></a>

Thanks for any help you can provide!
 
E

Evertjan.

hoolie wrote on 27 sep 2004 in comp.lang.javascript:
I'm preloading images with the standard code:

default1 = new Image(); default1.src = "images/image1.gif";
changed1 = new Image(); changed1.src = "images/image1-on.gif";
default2 = new Image(); default2.src = "images/image2.gif";
changed2 = new Image(); changed2.src = "images/image2-on.gif";

And this is my rollover code:

var iName="";
function Ichange(p) {
var pSrc=eval(p+ ".src");
document[iName].src = pSrc;
}

But for some reason on the first mouseover it doesn't seem like the
image has been preloaded. There is a delay, like it's looking for the
rollover image, which should have already been preloaded. Anyone have
any ideas why?

Here is the inline code for a mouseover:
<a href="test.html" onMouseOver="iName='image1'; Ichange('changed1')"
onMouseOut="Ichange('default1')"><img src="images/image1.gif"
width="122" height="19" border="0" name="image1"></a>
Click to expand...

eval() is evil and not needed here.
var pSrc=p+ ".src"; works the same, as you need a string, but ...

use the onmouseover of <img>, not <a>,
and you do not need the function overhead.

==========================

try this [in the <head> section!!]:

default1 = new Image(); default1.src = "images/image1.gif";
changed1 = new Image(); changed1.src = "images/image1-on.gif";
default2 = new Image(); default2.src = "images/image2.gif";
changed2 = new Image(); changed2.src = "images/image2-on.gif";

and this in the <body>

<a href="test.html">
<img src="images/image1.gif"
onMouseOver="this.src='changed1.src'"
onMouseOut="this.src='default1.src'"
width="122" height="19" border="0">
</a>

not tested
 
M

Michael Winter

hoolie wrote on 27 sep 2004 in comp.lang.javascript:
[snip]
And this is my rollover code:

var iName="";
Click to expand...
Click to expand...

As Evertjan suggested, placing the rollover code on the image itself means
you don't have to worry about its name. You can use the 'this' operator to
refer to the image object.

The eval function is almost never necessary. It's faster to use bracket
accessors:

var pSrc = window[p].src;

Global variables are properties of the global object. In a browser
environment, this is the window object. The bracket property accessors
take the enclosed expression, p in this case, convert it to a string
(which it already is), and finds the property with that name.
document[iName].src = pSrc;
Click to expand...
Click to expand...

It's better to use the images collection:

document.images[iName].src = pSrc;

but as I said, if Ichange was activated from the image, not the link, that
could be simplified to:

this.src = pSrc;

and the iName variable wouldn't be necessary.

It could be your security settings. My rollover code seemed to act
strangely with IE. When I set my website as a Trusted Site, there was no
problem. I haven't worked out which setting is causing the problem, though.

Take a look at:

<URL:http://www.mlwinter.pwp.blueyonder.co.uk/image-swap/>

If the rollover image there (the text, 'On') doesn't appear when activated
(remember to give it time to preload!), it's a setting in your browser.
You might also want to think about downloading and using that code. It's a
lot easier to maintain, in my opinion, than writing a huge list of
filenames. Moreover, as you're using a naming system close to what the
code requires only a few changes to your filenames will be necessary to
work with your site.

[snip]
<a href="test.html">
<img src="images/image1.gif"
onMouseOver="this.src='changed1.src'"
onMouseOut="this.src='default1.src'"
Click to expand...

That won't work. You're assigning a simple string, "changed1.src", as the
source URL. As I posted above, you need:

this.src = window['changed1'].src
width="122" height="19" border="0">
</a>

not tested
Click to expand...

Perhaps you should have. :p :)

Mike
 
E

Evertjan.

Michael Winter wrote on 27 sep 2004 in comp.lang.javascript:
onMouseOut="this.src='default1.src'"
Click to expand...

That won't work. You're assigning a simple string, "changed1.src", as
the source URL. As I posted above, you need:

this.src = window['changed1'].src
width="122" height="19" border="0">
</a>

not tested
Click to expand...

Perhaps you should have. :p :)
Click to expand...

I see what you mean.

I always [till now] used an array:

this.src = imgArray[n].src

but this
this.src = window['changed1'].src
Click to expand...

should not be necessary
as this should work [unquoted]:

this.src=changed1.src

??
 
M

Michael Winter

Michael Winter wrote on 27 sep 2004 in comp.lang.javascript:
[snip]
this.src = window['changed1'].src
Click to expand...

should not be necessary
as this should work [unquoted]:

this.src=changed1.src
Click to expand...

Yes, that will do fine. I was still thinking about the previous comments
to the OP where a variable look-up was necessary.

Mike
 
T

Thomas 'PointedEars' Lahn

hoolie said:
I'm preloading images with the standard code:

default1 = new Image(); default1.src = "images/image1.gif";
changed1 = new Image(); changed1.src = "images/image1-on.gif";
default2 = new Image(); default2.src = "images/image2.gif";
changed2 = new Image(); changed2.src = "images/image2-on.gif";
Click to expand...

There is nothing standard about this code, the ECMAScript compliant
syntax aside. You are using host objects like Image without testing
prior, and you are assuming that the object returned has a "src"
property you can add/overwrite.
And this is my rollover code:

var iName="";
function Ichange(p) {
var pSrc=eval(p+ ".src");
Click to expand...

The use of eval(...) is neither required nor recommended here, see the FAQ.
document[iName].src = pSrc;
Click to expand...

One should use the document.images collection, and one should not depend on
that named/ID'd ("img") elements become properties of the document object
as it is in the IE DOM.
}

But for some reason on the first mouseover it doesn't seem like the
image has been preloaded. There is a delay, like it's looking for the
rollover image, which should have already been preloaded. Anyone have
any ideas why?
[...]
Click to expand...

Your code is garbage. Try this instead, for it has been peer-reviewed
and tested intensively:

<http://www.pointedears.de/scripts/test/hoverMe>

And keep in mind that so-called preloading can do harm as it only works
reasonably if the client's/proxy's cache settings are appropriate.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Picture Comparison Code Not Working Properly 1
New to coding - image to the time of day based on time 2
JQuery - Preloading Images 0
Image upload not working in browser 4
Use one frame to change images in another frame. 7
rollovers not preloading images, why? 2
pre-loading images not working? 12
Preload images still reloading from server? 2

Members online

Total: 39 (members: 2, guests: 37)
Robots: 213

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top