Image preload problem

Question

0.00/5 (No votes)

See more:

Hi,
Please, could someone tell me why the alert shows undefined in the following page

XML

<html>
<head>
<title>test</title>
<script language="JavaScript">
var theLargeImg;
function loadImage(url)
{
theLargeImg = new Image();
theLargeImg.onload=imageLoaded();
theLargeImg.src = url;
}
function imageLoaded()
{
alert("img height="+theLargeImg.Height+";img width="+theLargeImg.Width+";complete = "+theLargeImg.complete+&"; src= "+theLargeImg.src);
}
</script>

</head>
<body>
<input type="button" onclick="javascript:loadImage('http://www.google.co.uk/intl/en_ALL/images/logos/images_logo_lg.gif')" value="Load Image">
</body>
</html>

Thanks,
Richard.

Posted 28-Dec-10 13:58pm

Richard Bushill

Updated 28-Dec-10 18:45pm

Sandeep Mewara

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

stone__ · Answer 1 · 2010-12-28T14:47:00

Solution 1

1. u should put event onload after the "src".

C#

function loadImage(url)
      {
       theLargeImg = new Image();
       theLargeImg.src = url;
       theLargeImg.onload=imageLoaded();
      }

2. "Height" and "Width" ,both first letter should be low-case.

Posted 28-Dec-10 14:47pm

stone__

Comments

Richard Bushill 28-Dec-10 20:56pm

Hmm, still does not seem to work and this article

http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called

seems to disagree, thanks for the answer though, any further thoughts ?

stone__ 29-Dec-10 1:48am

i'm sorry,i made a mistake.
function loadImage(url)
{
theLargeImg = new Image();
theLargeImg.onload=imageLoaded(); --> theLargeImg.onload=imageLoaded;
theLargeImg.src = url;
}
i try this code in ie7 and firefox.the event are triggered.
but in ie7 "theLargeImg.complete" are false,in ff are true.

Richard Bushill 29-Dec-10 10:04am

Yes, exactly what I was finding except I tested a load of different browsers all of which handled complete differently, most of which fired the event before the image was fully loaded. The solution I am using is to test the image width for a value of 0 before concluding that the image has indeed finished downloading as follows :
function imageLoaded()
{
if(!theLargeImg.complete || theLargeImg.width==0)
{
setTimeout ( "imageLoaded()", 500);
//alert("delay because image complete="+theLargeImg.complete);
return null;
}

alert("img height="+theLargeImg.Height+";img width="+theLargeImg.Width+";complete = "+theLargeImg.complete+&"; src= "+theLargeImg.src);
}