New issue 67413 by 2chin.yip: get image size in img onload function
http://code.google.com/p/chromium/issues/detail?id=67413
Chrome Version : 10.0.603.3
URLs (if applicable) :
Other browsers tested:
Firefox 3.x: OK
IE 7/8: OK
Chrome earlier than 10.0.x: OK
What steps will reproduce the problem?
1. attach an onload event to an img element<img src="xxx"
onload="dosth(this)"/>
2. assign the src of img element to an Image object, and get the width
var img = new Image();
img.src = this.src;
alert(img.width);
What is the expected result?
Can get the image width because the image should be already loaded while
the onload event is triggered, assign the src to an object should load the
image from browser cache.
What happens instead?
img.width equals to 0, the image will be downloaded again.
Please provide any additional information below. Attach a screenshot if
possible.
My case is related to this issue I think:
Essentially javascript detect a wrong width of an image loaded from cache.
1) if you doesn't have the image in cache it gets the right width (275)
2) if you reload the page and the image is in the cache it gets 0.
here attached my test case.
WORKAROUND:
if you add at the testcase this line :
img.setAttribute( "src" , "");
before :
img.setAttribute( "onload", "alert(this.width)");
it gets the correct width.
Attachments:
imageload.html 376 bytes
Chrome 11.0.696.65, MacOSX 10.6.7 : bug confirmed.
MacOsx build only. Work fine in Windows version.
Can reproduce the same exact behaviour in Chrome 14.0.835.186 m on a XP
machine. Workaround does not work for me:
jQuery('<img class="lightbox_content" alt="" />')
.appendTo(jQuery('#lightbox'))
.attr('src', 'image.jpg')
.load(function(){
console.log(jQuery(this).width());
});
logs 0 instead of the image's width. Works fine in all other browsers and
older Chome versions.
so now the problem is worse than before... great :(
Comment #5 on issue 67413 by no...@chromium.org: get image size in img
onload function
http://code.google.com/p/chromium/issues/detail?id=67413
Images are not loaded until the img.onload event fires. Slow servers
and/or large images may cause image
loads to be variously delayed cross browser, whether the image comes from a
cache or the network. The load event should be used if subsequent
processing of an image is needed, such as reading it's length.
var img = new Image();
img.onload = function() { console.log(this.width) }
img.onerror = function() { console.log('image load failed') }
img.src = .. some-image-url-here ..
You should always assign the onload handler _before_ setting the image .src
re #6:
works for me -> shows 275 all the time (v17.0.963.56)
#6, easier still per
http://www.w3.org/TR/html5/embedded-content-1.html#the-img-element
"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 intrinsic width and height
of the image, in CSS pixels, if the image is available but not being
rendered to a visual medium; or else 0, if the image is not available."
#7 agree, with or without an empty cache.
I can affirm #7 and #8, seems to be fixed in Chrome 17.0.963.56 m (I tried
on a very slow XP machine and a very fast Win 7 machine). Tested my
lightbox-implementation (works again) and the test case from #6 (alerts
275).
But why is the the status set to WontFix? Obviously there was anything
fixed between Chrome 14 and 17.
maybe it got fixed resolving another bug, on a chromium 12.0.742.122 still
get the error.