472,145 Members | 1,399 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > javascript > questions > determine whether the image file is loaded

Join Bytes to post your question to a community of 472,145 software developers and data experts.

determine whether the image file is loaded

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
Jul 20 '05 #1
16 6074

"Donjuan" <yi*******@hotmail.com> wrote in message
news:bf***********@mail.cn99.com...
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
Jul 20 '05 #2
In article <3f********@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:
http://mosley.arach.net.au/test/loadImage.htm


Utterly broken in my Mozilla. That would explain why the code wasn't posted
here.
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.
Jul 20 '05 #3

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m04.aol.com...
In article <3f********@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:
http://mosley.arach.net.au/test/loadImage.htm
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

Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.

Jul 20 '05 #4
"Mosley Jones III" <me@info.gov.mars> wrote in message
news:3f******@funnel.arach.net.au...

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m04.aol.com...
In article <3f********@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:
http://mosley.arach.net.au/test/loadImage.htm


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

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
Jul 20 '05 #5

"Zac Hester" <ne**@planetzac.net> wrote in message
news:3f********@news.enetis.net...
"Mosley Jones III" <me@info.gov.mars> wrote in message
news:3f******@funnel.arach.net.au...

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m04.aol.com...
In article <3f********@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:

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

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

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

Jul 20 '05 #6
"Mosley Jones III" <me@info.gov.mars> writes:
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,
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 <layer>).
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:is**********@hotpop.com...
"Mosley Jones III" <me@info.gov.mars> writes:
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,


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 <layer>).
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.


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?
It is not a good example.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jul 20 '05 #8
In article <3f******@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:

<--snip-->
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


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.
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.
Jul 20 '05 #9

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m07.aol.com...
In article <3f******@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:

<--snip-->
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
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

--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.


Jul 20 '05 #10
On Wed, 23 Jul 2003 12:52:22 +0800, "Mosley Jones III"
<me@info.gov.mars> wrote:
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.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 20 '05 #11
"Mosley Jones III" <me@info.gov.mars> wrote in message
news:3f******@funnel.arach.net.au...

"Zac Hester" <ne**@planetzac.net> wrote in message
news:3f********@news.enetis.net...
"Mosley Jones III" <me@info.gov.mars> wrote in message
news:3f******@funnel.arach.net.au...

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m04.aol.com...
> In article <3f********@funnel.arach.net.au>, "Mosley Jones III"
> <me@info.gov.mars> writes:
>
> >http://mosley.arach.net.au/test/loadImage.htm
>
> 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

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


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.
Jul 20 '05 #12

"Zac Hester" <ne**@planetzac.net> wrote in message
news:3f********@news.enetis.net...
"Mosley Jones III" <me@info.gov.mars> wrote in message
news:3f******@funnel.arach.net.au...

"Zac Hester" <ne**@planetzac.net> wrote in message
news:3f********@news.enetis.net...
"Mosley Jones III" <me@info.gov.mars> wrote in message
news:3f******@funnel.arach.net.au...
>
> "HikksNotAtHome" <hi************@aol.com> wrote in message
> news:20***************************@mb-m04.aol.com...
> > In article <3f********@funnel.arach.net.au>, "Mosley Jones III"
> > <me@info.gov.mars> writes:
> >
> > >http://mosley.arach.net.au/test/loadImage.htm
> >
> > 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
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


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


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.

Jul 20 '05 #13
In article <3f******@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:

<--snip-->
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


Were you born that stupid or have you worked at it to become that stupid?
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.
Jul 20 '05 #14

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m15.aol.com...
In article <3f******@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:

<--snip-->
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


Were you born that stupid or have you worked at it to become that stupid?
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.


yes we know that,
I don't think your coping with the debate
Jul 20 '05 #15
In article <3f********@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:

<--snip-->
yes we know that,
I don't think your coping with the debate


The debate about crappily written IE-only javascript code that could just as
easily be written to work in *any* browser that supports images?
That the debate I am not 'coping with'?

Or is it that you don't have a clue what the hell you are talking about when it
comes to true javascript, other than what Visual Studio 6 will produce for you?

Or, that you are a troll looking to start trouble?

Now, go get a grip, have a beer, learn what you are doing, then come back and
learn some more.

Since you clearly lack the ability to comprehend what anybody says to you, this
is my last reply to you, so say what you want.
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.
Jul 20 '05 #16

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m19.aol.com...
In article <3f********@funnel.arach.net.au>, "Mosley Jones III"
<me@info.gov.mars> writes:

<--snip-->
yes we know that,
I don't think your coping with the debate
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,


Or is it that you don't have a clue what the hell you are talking about when it comes to true javascript, other than what Visual Studio 6 will produce for you?
Or, that you are a troll looking to start trouble?

Now, go get a grip, have a beer, learn what you are doing, then come back and learn some more.

Since you clearly lack the ability to comprehend what anybody says to you, this is my last reply to you, so say what you want.
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.

Jul 20 '05 #17

This discussion thread is closed

Start new discussion

Replies have been disabled for this discussion.

Similar topics
determine the mime/ContentType of a binary stream?
4 posts views Thread by Alex Vincent | last post: by
Determine if image source exists?
6 posts views Thread by Rick Brandt | last post: by
Can a script determine its own location?
5 posts views Thread by Martin Larsen | last post: by
Using jS to display an image from file
2 posts views Thread by Tim Streater | last post: by
PHP
determine text position in image
4 posts views Thread by sarika | last post: by
Creating a social network (help)
reply views Thread by Saiars | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates