By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,575 Members | 1,293 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,575 IT Pros & Developers. It's quick & easy.

Preload images not working

P: n/a
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!
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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>


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

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

Jul 23 '05 #2

P: n/a
On 27 Sep 2004 07:33:50 GMT, Evertjan. <ex**************@interxnl.net>
wrote:
hoolie wrote on 27 sep 2004 in comp.lang.javascript:
[snip]
And this is my rollover code:

var iName="";
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.
function Ichange(p) {
var pSrc=eval(p+ ".src");
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;
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.
}

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?


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'"
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


Perhaps you should have. :P :)

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

P: n/a
Michael Winter wrote on 27 sep 2004 in comp.lang.javascript:
onMouseOut="this.src='default1.src'"
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


Perhaps you should have. :P :)


I see what you mean.

I always [till now] used an array:

this.src = imgArray[n].src

but this
this.src = window['changed1'].src


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

this.src=changed1.src

??
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

Jul 23 '05 #4

P: n/a
On 27 Sep 2004 10:36:51 GMT, Evertjan. <ex**************@interxnl.net>
wrote:
Michael Winter wrote on 27 sep 2004 in comp.lang.javascript:


[snip]
this.src = window['changed1'].src


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

this.src=changed1.src


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

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #5

P: n/a
hoolie wrote:
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";
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");
The use of eval(...) is neither required nor recommended here, see the FAQ.
document[iName].src = pSrc;
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?
[...]


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
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.