width returning 0 in jquery

Question

i have some jquery script which runs after the window has loaded

$(window).load( function() {
   $('.picture a img').each(function(index) {
       $(this).height(280);
       if ($(this).width() > $(this).height()) {
          alert("yes");
       } else {
          alert("no");
       }

   });
});

i always get a "no" from this when i know some of the images should be a "yes". When i trace the script in chrome i noticed that the $(this).width() always returns a 0. ive googled around and some suggestions were that the images havent loaded but here ive used the window.load method which i thought should run once everything has loaded. any ideas??

thanks for any help in advance

Can you paste the URL to the images and/or the HTTP headers for the image(s)? Is this consistent x-browser? — meder omuraliev, Jun 29 '11 at 15:48
And if you remove all the CSS from it ( position absolute, height, float left ) ? — meder omuraliev, Jun 29 '11 at 16:38
This doesn't seem to alert 0 for me in chrome... http://jsfiddle.net/MS7dU/ . Can you reproduce the issue on [jsfiddle](http://www.jsfiddle.com)? — James Montagne, Jun 29 '11 at 17:41
Are the images visible at the time this script runs? I believe images with `display:none` will return a 0 width. — James Montagne, Jun 29 '11 at 18:01

score 1 · Accepted Answer · answered Jun 29 '11 at 17:30

Chrome is weird about image widths. I noticed then when building a jQuery photo gallery. If your image width is not specifically set in the tag, chrome will return 0. FF, and IE will figure out the width, but chrome will not. Try actually setting the width and see if you get the desired result then.

<img width="200" src="..." />

score 1 · Answer 2 · answered Jun 29 '11 at 19:06

You need to run your code when the image is loaded, the following code should work:

$(window).load( function() {
   $('.picture a img').load( function() {
       $(this).height(280);
       if ($(this).width() > $(this).height()) {
          alert("yes");
       } else {
          alert("no");
       }
   });
});

note that every DOM element that have some kind of web resource associated to (window, img, iframe) respond to .load() event.

score 0 · Answer 3 · answered Jun 29 '11 at 15:45

0

try

if ($(this).attr("width") > $(this).attr("height")) {

answered Jun 29 '11 at 15:45

Mithun Sreedharan

49,883
70
181
236

score 0 · Answer 4 · answered Jun 29 '11 at 17:44

0

try adding a load event on the image, so it will only execute when the image is fully loaded.

$(window).load( function() {
  $('.picture a img').each(function(index) {
     $(this).bind('load', function () {
       $(this).height(280);
       if ($(this).width() > $(this).height()) {
          alert("yes");
       } else {
          alert("no");
       }
     })
   });
});

you can also try checking this.complete on the image object

answered Jun 29 '11 at 17:44

yoavmatchulsky

2,962
1
17
22

`load` events are very inconsistent cross-browser on images. From the [load docs](http://api.jquery.com/load-event/) "Caveats of the load event when used with images: A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are: It doesn't work consistently nor reliably cross-browser..." – James Montagne Jun 29 '11 at 17:56

score 0 · Answer 5 · answered Jul 01 '11 at 04:49

I just wanted to add that you should also ensure that your image is actually a visible element. I've had plenty of issues in the past trying to measure visible:hidden or display:none elements. If you are indeed attempting to measure a hidden element, you can get past it by doing something like

var width = $('img').show().width();
$('img').hide();

Now that code is incredibly vague, but it gives you my thought behind visibility flashing.

score -5 · Answer 6 · answered Jun 29 '11 at 15:43

-5

The correct method to use, to run your scripts after the dom has finished loading, is:

$(document).ready(function() { /*your code here*/ });

answered Jun 29 '11 at 15:43

Matteo Mosca

7,380
4
44
80

width returning 0 in jquery

6 Answers6