Closed Bug 301279 Opened 19 years ago Closed 15 years ago

Javascript image loading, height and width not directly available (when image not in cache)

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
minor

Tracking

()

Status:
RESOLVED DUPLICATE of bug 466586

People

(Reporter: firefox, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; nl-NL; rv:1.7.8) Gecko/20050511 Firefox/1.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; nl-NL; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

When using javascript to preload images the height and width properties of the
image object are not directly set to the correct size. 
It happens only if the image is not cached, thus suggesting the javascript
continues to the next function while the image is still being loaded.

Reproducible: Always

Steps to Reproduce:
1. clear cache
2. run html snippet


Actual Results:  
height: 0 width: 0

Expected Results:  
height: 15 width: 80
Html sample file.

<html>
<head>
</head>

<body>
<script>
var img = new Image();
img.src = "http://sfx-images.mozilla.org/affiliates/Buttons/80x15/blue_1.gif";
document.write("height: " + img.height + " width: " + img.width);
</script>

</body>
</html>
This is as it should be. Web browsers load the image in the background allowing
scripts to continue. You can use the complete property of the image or the load
event to detect when it has finished loading.

This is invalid. Rewrite your script as follow:

var img = new Image();
img.src = "http://sfx-images.mozilla.org/affiliates/Buttons/80x15/blue_1.gif";
img.onload = function()
{
    document.write("height: " + this.height + " width: " + this.width);
}
Status: UNCONFIRMED → RESOLVED
Closed: 15 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.