can't get true height/width of object in chrome
The images aren't loaded in document.ready
, you need to use the window.load
event to make sure they're present, like this:
$(window).load(function(){ $("#text").append($("#img_0").height()); $("#text").append($("#img_0").width());});
Here's a quick read on the difference, the important part is that pictures are loaded.
Nick Craver's answer to use $(window).load() is correct, but the images also have a load() method, which allows finer granularity, especially if there are perhaps multiple images to load.
$(document).ready(function(){ $("#top_img_0").load (function (){ $("#text").append( "height: " + $("#top_img_0").attr("height")+"<br/>" ); $("#text").append( "width: " + $("#top_img_0").attr("width")+"<br/>" ); }); });
It looks like it is a race condition, at least it was for me using Chrome. The image isn't finished loading at the time you are getting the dimensions. I set everything to fire after a 200ms timeout and the real width/height are displayed.
$(document).ready(function() { setTimeout("getImageDimensions()", 200); }); function getImageDimensions() { var pic_real_width; var pic_real_height; $("#topContent img").each(function() { var $this = $(this); $this.removeAttr("width"); $this.removeAttr("height"); $this.css({ width: 'auto', height: 'auto' }); pic_real_width = $this.width(); pic_real_height = $this.height(); $this.css({ width: '', height: '100px' }); }); $("#text").append(" height: " + pic_real_height/*$("#top_img_0").attr("height")*/ + "<br/>"); $("#text").append(" width: " + pic_real_width/*$("#top_img_0").attr("width")*/ + "<br/>"); }
Tested and works in Chrome, IE and Firefox. All display 2008 x 3008.