1133795 - Uncached images returns zero size in JavaScript

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[Jakub Czerny]

Attachment: deferred-image-loading-demo.js

Description: 
If one creates and image tag, assigns `src` attribute and immediately reads `width` and `height` properties, zeros are returned. The bug appears only if the image is not cached.
Note on image caching: Standard images (specified by address like 'http://...' are cached per Firefox instance. DataUri images are cached per tab.

Steps to reproduce:
1. Open some tab (eg. 'https://bugzilla.mozilla.org')
2. Open console (Ctrl+Shift+K)
3. Open scratchpad
4. Run attached script deferred-image-loading-demo.js twice.
5. Console shows 
0 0 
509 272

Clean your cache (Ctrl+Shift+Del) before experimenting with http located image (commented line 15 in attached script).

This bug does not much bother regular browser but rather web developers - it is difficult to get image dimensions.

Comment 1

[j.j.]

I think this is basically a dup of bug 715075, setting dependency

Comment 2

[Boris Zbarsky [:bzbarsky]]

What behavior did you expect, exactly?  If the image is not cached, and you read .width immediately after setting .src, the image is not loaded, so its dimensions are not known.

What the spec says is:

  The IDL attributes width and height must return the rendered width and height of the
  image, in CSS pixels, if the image is being rendered, and is being rendered to a visual
  medium; or else the density-corrected intrinsic width and height of the image, in CSS
  pixels, if the image has intrinsic dimensions and is available but not being rendered
  to a visual medium; or else 0, if the image is not available or does not have intrinsic
  dimensions.

In your testcase, the image is never being rendered and the .width is being read befrore the image is available, so you get 0.  This has nothing to do with bug 715075, which is a page info bug.

Comment 3

[Jakub Czerny]

Expected behavior is IMHO obvious - to get image dimensions right after assigning 'src' attribute. This bug also applies to 'naturalWidth' and 'naturalHeight' properties. The attached snippet is from uploading library aiming to verify maximum image dimensions - without actual rendering.

I understand that assigning to 'src' property is potentially long-lasting operation that can't be performed synchronously. However AFAIK there is no callback for waiting for image to be loaded.

That's why I think it could be worth to consider to implement something like an execution pause (with timeout e.g. 500ms) in case (natural)width/height properties of currently loading image are accessed. Chrome implements such feature - the attached snippet works ok in Chrome 39.

Comment 4

[Jakub Czerny]

IE 11 works ok for dataUri images and returns "0, 0" for uncached http located images.

Comment 5

[Boris Zbarsky [:bzbarsky]]

> to get image dimensions right after assigning 'src' attribute

That's not possible, because the image hasn't been loaded.

> assigning to 'src' property is potentially long-lasting operation that can't be
> performed synchronously

Exactly.

> However AFAIK there is no callback for waiting for image to be loaded.

Sure there is.  The "load" event on the image.

> Chrome implements such feature - the attached snippet works ok in Chrome 39.

It may simply be sync-loading data: images (which by the way violates the spec, if so).