Image src change inconsistency (Mozilla Firefox)

@Fury_PilotFeb 18.2006

Hello,

This was a tough thing to find in the archives, so I apologise if it is an already answered question:

I have found that IE6 happily lets me change the src of an image in any JavaScript function, whereas Mozilla Firefox 1.5 does not. Having looked at JavaScript documentation, I do not understand why there is a difference.

This code:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

<HTML>

<HEAD>
<TITLE>Image Zoom Window – The page that opened this window is behind it</TITLE>
</HEAD>

<BODY>

<P>In IE6, the image appears as part of the page load; in Mozilla Firefox 1.5
only putting the mouse over the blank image causes the full image to
appear.</P>

</DIV>

</BODY>

</HTML>

(which can be tried at: ~~[url]~~http://213.162.107.39/test/Debug.html?Bergerac.jpg[/url]) gives a different result in IE6 and Mozilla Firefox 1.5.

Can anybody explain to me why, and (hopefully) show me how to make the 2nd block of JavaScript work in Firefox – so the full image loads w/o having to run the mouse pointer over the blank image?

to post a comment

JavaScript

6 Comments(s) _↴

@phpnoviceFeb 18.2006 — #Why do this at all?

<i>
 </i>&lt;SCRIPT type="text/javascript"&gt;
 &lt;!-- 
 var dummy2 = new Image(); 
 dummy2.src =location.search.substring(1); 
 //--&gt; 
 &lt;/SCRIPT&gt;
 
 &lt;IMG name="dummy" alt="fred" onmouseover="dummy.src = dummy2.src" border="1" /&gt;
 
 &lt;SCRIPT type="text/javascript"&gt;
 &lt;!--
 dummy.src = dummy2.src;
 //--&gt;
 &lt;/SCRIPT&gt;

Why not just do this?

<i>
 </i>&lt;IMG name="dummy" src="" alt="fred" border="1" /&gt;
 
 &lt;SCRIPT type="text/javascript"&gt;
 &lt;!--//
 document.images["dummy"].src = location.search.substring(1);
 //--&gt;
 &lt;/SCRIPT&gt;

@phpnoviceFeb 18.2006 — #However... I can tell you why it does not work as expected. The reason has to do with default object scope. As coded, the following does not inform the browser as to what top level object you're addressing:

dummy.src

In IE, the default top level object scope is [b]document[/b] or [b]document.all[/b] -- which, the following is valid in IE:

document.all.dummy.src

In Mozilla, the default top level object scope is [b]window[/b] -- which, the following will not work in either browser:

window.dummy.src

Now, in Mozilla, within an event handler, the default object scope is the same top-level object scope as the event handler. Thus, the [b]onmouseover[/b] event handler for the IMG tag has a [b]document.images[/b] object scope.

Thus, you'll notice in my example, above, that I changed the second example to use an explicit object reference. This will work in both browsers.

@Fury_PilotauthorFeb 18.2006 — #That's brilliant. It works a treat; exactly as I want. Many thanks. (BTW: The code is intended to avoid the person, waiting for large images to download from my (slow) personal web server, thinking that something has gone wrong.)

I just haven't seen that IE/Mozilla difference documented anywhere, and I've never known when/why to use ...["something"].property instead of .something.property. Am I right in thinking that these are normally interchangeable?

@phpnoviceFeb 18.2006 — #The code is intended to avoid the person, waiting for large images to download from my (slow) personal web server, thinking that something has gone wrong.[/QUOTE]
Yes, I understand that is the purpose of doing a pre-load. However, as it was coded, there was no benefit in attempting a pre-load because the image was also attempting to be displayed immediately. A pre-load does not help in that situation.
... and I've never known when/why to use ...["something"].property instead of .something.property. Am I right in thinking that these are normally interchangeable?[/QUOTE]
Yes, the following are pretty much equal:

document.images.dummy.src

document.images["dummy"].src

Where the second syntax is required is when there are certain special characters and/or spaces in the name of the element:

document.images["My Image"].src

@Fury_PilotauthorFeb 19.2006 — #Yes, I understand that is the purpose of doing a pre-load. However, as it was coded, there was no benefit in attempting a pre-load because the image was also attempting to be displayed immediately. A pre-load does not help in that situation.[/QUOTE]

The code probably looked odd because I wasn't going for the preload; I wanted the image to build up, to show progress. In the full version, I use DIV layers to show some reassuring text, which is overwritten by the image. For some reason, there's quite a delay between the page coming (with the text), and the image starting to appear - during this time the text is visible and I also update the page title with a new dot (...) every second until the image is loaded (like a progress bar). The title is changed again when the image is fully loaded.

Yes, the following are pretty much equal:

document.images.dummy.src

document.images["dummy"].src

Where the second syntax is required is when there are certain special characters and/or spaces in the name of the element:

document.images["My Image"].src[/QUOTE]

Thanks for clearing that up.

@phpnoviceFeb 19.2006 — #You're welcome.

Also in #JavaScript _↴

Jquery Autocomplete jQuery and AJAX for multiple elements on page [RESOLVED] Force a window to close?

Success!

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

Tweet This

Image src change inconsistency (Mozilla Firefox)

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Image src change inconsistency (Mozilla Firefox)

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴