Help with JavaScript and images

I have a problem that I have been unable to solve for quite a long time; any suggestion would be greatly appreciated.

I have a HTML form that collects information, and depending on the information entered, and image may or may not be displayed after clicking the Process button.

The whole thing is controlled by a number of JavaScript functions.

Now, I need to know if an image was loaded or not, but how?

What I have tried so far is to put the onload() event into the <img> tag, and call a JS function that will set a boolean to 1.

That works, but unfortunately that event is also triggered when no image is loaded!

Now in Firefox, if I right-click on a loaded image, I can select View Image Info, and I will get all information (dimensions, size) about that image. So the information is there; Firefox knows about it.

My big question is: is there any way that I can obtain these same information in my JavaScript?

 

If you just want to see whether an image should be loaded, it would be better to set flags in an object with each image load, so you didn't need to come back later to check the images, you can just check the object's flags. This would also avoid problems where an image starts to load, and is interrupted, so then is found to have not finished loading by following tests.

If you want to check whether an image started loading, you can check for the image in the place where it should be, using the DOM.

If you want to check to see if the image actually is completely loaded, you can check the image's complete property, or other properties, if you need them:

http://www.w3schools.com/jsref/dom_obj_image.asp
http://www.javascriptkit.com/jsref/image.shtml
http://www.javascriptkit.com/javatutors/image2.shtml

Some of these properties change after the image is loaded.

For the dimensions, you can use:
(width,height) change as the image loads, or may not be set at all, (unless set in the tag or constructor, which is useless to determine how much is loaded)
or
(clientWidth,clientHeight) give the actual size shown on-screen.

If you want the file size, there is only the IE-only attribute fileSize without making some kind of custom wrapper to load the image, which may even tend to report a different size than the actual file stored on the server, depending on the encoding. It would be complicated:
http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript
http://stackoverflow.com/questions/...d-bytes-total-of-images-via-javascript-jquery
http://stackoverflow.com/questions/4552369/how-to-get-image-size-in-bytes-using-javascript

 

I should add that browsers tend to resize large images, making (clientWidth,clientHeight) not return the original size of those images, even if they are not resized by html or javascript.

 

Thank you very much! I will do some testing over the next few days; I may come back with additional questions.

 

I did not accurately describe the situation in my initial post. When I wrote "an image may or may not be displayed" I actually meant that an image may or may not exist on the server, and I do not know if anything is actually displayed as a consequence.

But thanks to your suggestion and some testing I found the solution. (The 'complete' property is always true, whether or not the image actually exists.)

This is what I did:

Code:

        testImage = new Image(); 
        testImage.src = imgurl;

If the image exists, the height and width contain the actual dimensions.
If the image does not exist, the height and width are set to 1.
(clientHeight and clientWidth remain 0 in both cases.)

Thank you again for your valuable help!

P.S. now I have to test if this works the same way on IE...

 

Just in case anybody ever finds this topic looking for a solution...

The above did not work consistently, most likely because after setting testImage.src the code was immediately testing testImage.height, which may not already have been modified. (Running the code under the debugger always worked, but running it without debugger, it worked less than half of the time.)

So what I did was testing the height with a time-delayed function, and that works always! Here is the code

Code:

    testImage = new Image(); 
    if (isbn_val.length == 10)
        testImage.src = 'http://images.amazon.com/images/P/' + isbn_val + '.01._AA150_PU_PU-5_.jpg';
    setTimeout("checkImage(testImage)", 256);

Code:

function checkImage(img)
{
    if (img.height <= 1)
    {
        document.getElementById('has_img').textContent = '0';
        document.inputform.new_use_image.checked = false;
    }
    else
    {
        document.getElementById('has_img').textContent = '1';
        document.inputform.new_use_image.checked = true;
    }
}