determine whether the image file is loaded

Donjuan · Jul 22, 2003

Hi all
I have trouble with tracking whether my image file is loaded.
i use DHTML to change my image. HERE is the code:
<img name="someimage" src="1.jpg"
onclick="document.all.someimage.src='someimage.jpg">
but how can i determine whether "someimage.jpg" is loaded? and can i get the
download percent of a file?
Thanks in advance

Mosley Jones III · Jul 22, 2003

Donjuan said:
Hi all
I have trouble with tracking whether my image file is loaded.
i use DHTML to change my image. HERE is the code:
<img name="someimage" src="1.jpg"
onclick="document.all.someimage.src='someimage.jpg">
but how can i determine whether "someimage.jpg" is loaded? and can i get the
download percent of a file?
Thanks in advance

http://mosley.arach.net.au/test/loadImage.htm

Mosley Jones III · Jul 22, 2003

HikksNotAtHome said:
Utterly broken in my Mozilla. That would explain why the code wasn't posted
here.
--

I used ie DOM, seeing its a sample,

you can see the code by choosing view code

Zac Hester · Jul 22, 2003

Mosley Jones III said:
I used ie DOM, seeing its a sample,

you can see the code by choosing view code

My IE 6 had issues with this page. Maybe it's because there's not much
valid HTML here. Run it through the HTML validator on w3.org to get some
pointers on how to fix the document.

The validator turned up 12 errors after I forced it to use a basic character
encoding and document type.

The biggest problem with this example is that the event you're depending on
(ONREADYSTATECHANGE) does not exist in anything but IE. When learning by
example, it makes learning a challenge when the example is not exemplary of
anything practical.

***

To help the OP, there is no way to get the percentage of a loaded image.
However, if you are dynamically changing images with JavaScript, you should
cache all the images to the browser so the change appears instantly instead
of waiting for the new image to download.

To pre-cache an image in JavaScript, create a new Image object and set the
source to the image that will be displayed:

....
<head>
....
<script type="text/javascript">
var some_image1 = new Image().src = 'someimage1.jpg';
var some_image2 = new Image().src = 'someimage2.jpg';
function toggle(image_name) {
imref = document[image_name];
if(imref.src == 'someimage1.jpg') { imref.src = 'someimage2.jpg'; }
else { imref.src = 'someimage1.jpg'; }
}
</script>
</head>
<body>
<img src="someimage1.jpg" alt="Some Image" name="im"
onmouseover="toggle('im');"
onmouseout="toggle('im');" />
</body>
....

The script in the "head" of the document will make sure that all the images
are loaded into the browser's cache before moving on to the next section.
One way to allow the page to appear to load faster is to delay loading
images until the HTML is fully rendered by setting the "onload" event in the
"body" tag to call a function that creates all the new image objects and
loads the graphics. After all the "dynamic" images are loaded in the
browser, a mouseover or mouseout will be displayed instantly with no delay
in load time for the images. You may notice that the object references are
never used. So far, the most important use of the Image object is to help a
browser cache an image. That is why the code just sets and resets the "src"
attribute of the image tag in question.

For your purposes, you may also find the "onload" event useful. This event
is fired as soon as the browser has loaded an entire image:

<img src="someimage.jpg" alt="Some Image" onload="image_is_ready();" />

HTH,
Zac

Mosley Jones III · Jul 23, 2003

Zac Hester said:
My IE 6 had issues with this page. Maybe it's because there's not much
valid HTML here. Run it through the HTML validator on w3.org to get some
pointers on how to fix the document.

run Microsoft.com thought it you idiot,

if you have any issues with the page you have a problem with your computer.

I'm calling you a liar, there is no issues with the page it is a simple
event firing a alert, stop lying

The validator turned up 12 errors after I forced it to use a basic character
encoding and document type.

The biggest problem with this example is that the event you're depending on
(ONREADYSTATECHANGE) does not exist in anything but IE. When learning by
example, it makes learning a challenge when the example is not exemplary of
anything practical.

***

To help the OP, there is no way to get the percentage of a loaded image.
However, if you are dynamically changing images with JavaScript, you should
cache all the images to the browser so the change appears instantly instead
of waiting for the new image to download.

To pre-cache an image in JavaScript, create a new Image object and set the
source to the image that will be displayed:

...
<head>
...
<script type="text/javascript">
var some_image1 = new Image().src = 'someimage1.jpg';
var some_image2 = new Image().src = 'someimage2.jpg';
function toggle(image_name) {
imref = document[image_name];
if(imref.src == 'someimage1.jpg') { imref.src = 'someimage2.jpg'; }
else { imref.src = 'someimage1.jpg'; }
}
</script>
</head>
<body>
<img src="someimage1.jpg" alt="Some Image" name="im"
onmouseover="toggle('im');"
onmouseout="toggle('im');" />
</body>
...

The script in the "head" of the document will make sure that all the images
are loaded into the browser's cache before moving on to the next section.
One way to allow the page to appear to load faster is to delay loading
images until the HTML is fully rendered by setting the "onload" event in the
"body" tag to call a function that creates all the new image objects and
loads the graphics. After all the "dynamic" images are loaded in the
browser, a mouseover or mouseout will be displayed instantly with no delay
in load time for the images. You may notice that the object references are
never used. So far, the most important use of the Image object is to help a
browser cache an image. That is why the code just sets and resets the "src"
attribute of the image tag in question.

For your purposes, you may also find the "onload" event useful. This event
is fired as soon as the browser has loaded an entire image:

<img src="someimage.jpg" alt="Some Image" onload="image_is_ready();" />

HTH,
Zac

Lasse Reichstein Nielsen · Jul 23, 2003

run Microsoft.com thought it you idiot,

Yes, that page is horrible too.

if you have any issues with the page you have a problem with your computer.

I agree that it runs in my IE, but that does not change that it is
incorrect HTML (or that microsoft.com is bad HTML: It claims to be
text/html but uses XHTML end-tags (<meta ... />), and even uses the

old proprietary Netscape tag said:
I'm calling you a liar, there is no issues with the page it is a simple
event firing a alert, stop lying

Your attitude is counterproductive.

It might work, but the page's code is horrible by any recent HTML
standard. There is even HTML code after </html>, which makes no sense.

It is not a good example.

/L

Mosley Jones III · Jul 23, 2003

Lasse Reichstein Nielsen said:
Yes, that page is horrible too.
computer.

I agree that it runs in my IE, but that does not change that it is
incorrect HTML (or that microsoft.com is bad HTML: It claims to be
text/html but uses XHTML end-tags (<meta ... />), and even uses the

Your attitude is counterproductive.

Yes you are right,

But i dont think he was trying to be productive. And i think he is lying

It might work, but the page's code is horrible by any recent HTML
standard. There is even HTML code after </html>, which makes no sense.

HTML standard for what browser?

I was writing it for IE, it is as Microsoft the makers of IE do it.

Any page that passes the WW3 validator is not optimised for IE or Netscape.

both Netscape and IE advise you to do things different,

So what browser is the validator helping you code for?

Mosley Jones III · Jul 23, 2003

HikksNotAtHome said:
lying? liars? Oh, so I have problems with my computer because you can't write
decent HTML and not even semi-decent script? Interesting concept.

No not at all.

but seeing the script works fine for others yes you must have something
wrong or you are lying

either way I have better things to do, I see this group is your life, but it
isn't mine

any further attempt to contact me will be seen as a stalking problem of
yours

you are dismissed

Jim Ley · Jul 23, 2003

but seeing the script works fine for others yes you must have something
wrong or you are lying

Not at all, that's completely bogus logic, maybe you should take an
elementary course in logic aswell as elementary courses in javascript.

It's a shame you don't actually listen to what you're told. There are
many good reasons to ignore the W3's validator and to produce invalid
code - incompetence is not one of them. nor is needing to "optimise
for IE or netscape" If you wish to discuss the genuine sound reasons
to, I think you first need to demonstrate you actually understand it.

Jim.

Zac Hester · Jul 23, 2003

Mosley Jones III said:
run Microsoft.com thought it you idiot,

if you have any issues with the page you have a problem with your computer.

I'm calling you a liar, there is no issues with the page it is a simple
event firing a alert, stop lying

Mosley,

Let me be the first to sincerely apologize for any miscommunication on
either of our parts. That being said, you're going about your
counterargument all wrong. If you're going to refute someone's claims, you
need evidence. Calling me a "liar" does nothing to validate your point.
Let me explain why I made the comments I made, and maybe you can retort with
something slightly more sophisticated than "liar."

First, helping someone with their problem is commendable. I applaud you for
investing your time and effort into giving someone else a chance to become a
better developer because of your experience. However, I felt it necessary
to point out that your example is not what I would call a "viable solution."
While your example may work fine in your browser, it didn't work exactly as
you claimed in any one of my browsers (including IE 6). Yes, there is the
possibility that my computer doesn't work--that's always a possibility when
I'm running Windows. However, it seems that other people on this group are
also experiencing similar difficulties when trying to view your page.

Using a highly proprietary method of solving a problem makes your solution
limited to a small group of people. If you were assuming that the people
visiting Donjuan's web site will only be using MS IE 6 with Visual Studio 6
browser enhancements, then we can call this discussion over. However, if
maybe you wanted to help educate Donjuan by describing a method that can be
applied to a broader audience, your goal was not precisely met.

Personally, I find it disappointing that people are ever taught how to
"optimize" a web page for a particular browser. This sticks developers in a
rut that makes it harder to develop for anything but their favorite browser.
That's why we hear stuff like "Netscape is so touchy" or "IE is crappy."
It's because they think that their toy is the best and using anything else
seems silly. The fact of the matter is that we are coming out of the great
"Browser Wars." Eventually, all web browsers will adhere to much more
similar standards than they are currently. The body responsible for
determining these standards (W3C) is helping to prepare web developers by
allowing them to make sure their web pages comply with the formal standards.
In a few years, web developers will be able to harness a tremendous ability
to develop truly cross-capable web applications. When that happens, those
of us still droning the "IE is better" mantra will be loosing jobs to those
people willing to transcend their personal affinities.

Please accept my comments as an attempt to help us all become better members
of this online medium. If you want to stick your head in the ground and
call me a liar again, go ahead. You can't hurt my feelings. Life is simply
too short. My only goal is to help you become a better teacher. Guiding
those that come behind us is an important responsibility that can be very
rewarding. Try to live up to an example of leadership if you really do have
a desire to teach others. If your motives for helping people are
self-satisfaction or something besides serving others, this argument will
make no impact on you, and I will probably still be called a "liar."

I am truly sorry.

Thank you, and take care,
Zac

PS: Throwing the word "liar" around is not something I take lightly. If you
become defensive again, I would suggest using some other term. Even
something profane carries less weight than attacking someone's integrity.

Mosley Jones III · Jul 24, 2003

Zac Hester said:
Mosley,

Let me be the first to sincerely apologize for any miscommunication on
either of our parts. That being said, you're going about your
counterargument all wrong. If you're going to refute someone's claims, you
need evidence. Calling me a "liar" does nothing to validate your point.
Let me explain why I made the comments I made, and maybe you can retort with
something slightly more sophisticated than "liar."

no backpeddling ,

I have tested the page from outside my network and had friends check it,
works fine.
I think you lied for some egotistical reason known only to yourself

Mosley Jones III · Jul 25, 2003

HikksNotAtHome said:
Were you born that stupid or have you worked at it to become that stupid?

yes we know that,
I don't think your coping with the debate

Mosley Jones III · Jul 25, 2003

HikksNotAtHome said:
The debate about crappily

Crap

written IE-only javascript code

So shat?

that could just as

easily be written to work in *any* browser that supports images?

So what the problem?

That the debate I am not 'coping with'?

no your not,

your making a fool of yourself,

go away you are of no value to me,

Image issues	0	Apr 2, 2023
Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
Image upload not working in browser	4	Sep 9, 2022
Put image over the top of another image on hover	3	Feb 7, 2020
Image shifts to the right when export the page to pdf	4	May 5, 2023
Make 'Image X' spin 360deg on y-Axis until reset button clicked	1	Jan 22, 2023
Simple, but difficult to me. Image border property	1	Sep 22, 2022
How Do I Set text on an Image and use the image as a border?	7	Mar 16, 2023

determine whether the image file is loaded

Donjuan

Mosley Jones III

Mosley Jones III

Zac Hester

Mosley Jones III

Lasse Reichstein Nielsen

Mosley Jones III

Mosley Jones III

Jim Ley

Zac Hester

Mosley Jones III

Mosley Jones III

Mosley Jones III

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads