1

So I encountered the big image width height problem today, wherein a particular browser (Chrome v31.0.1626.5) gives me 0 width for an image selector using Jquery's .width() .
I have the below line in a Button's click handler after the image is loaded(or seems to be after it) in a Jquery UI dialog.

var imageWidth = $("#myImageSelector").width(); 

// imageWidth = 0 in Chrome  
// imageWidth = 1024 (which is the actual image width) in Firefox v23

So after a bit of research on the same, I found that I would be able to access the height and width properties of the image only after the image is loaded (here and here) and that there are some race conditions...
1. What is this race condition that is in question here?
2. How does Chrome deal with images differently than Firefox? And is it only with HTMLImageElement or other DOM elements too in general? Why is the width shown properly in Firefox? (Is it because the above said race conditions are handled more elegantly in Firefox?)

P.S. : Any references for further reading are much appreciated.

Community
  • 1
  • 1
Vandesh
  • 6,368
  • 1
  • 26
  • 38
  • No one is better than the other. They handle things in a different way as they use a different render engine. – Alvaro Sep 23 '13 at 09:25
  • that exactly is what I'd like to know , is it possible to know HOW they handle "things" differently? – Vandesh Sep 23 '13 at 09:29
  • I would say that is not possible. Usually there are not many problems dealing with jQuery. Think also that with any update of Chrome, or Firefox, or any other browser, this little things can change again. Also, Chrome is creating its own engine now based on webkit, which might cause more differences yet. – Alvaro Sep 23 '13 at 09:36

0 Answers0