0

Trying to find the img height and apply inline as attr. Currently img only has src attr but want to dynamically find height and apply.

Current

  <img src="#">

Desired

<img src="#" height="find this images height">

This is what i have so far

$(document).ready(function() {
 $("img").load(function() {
 var width = $(this).width();
 var height = $(this).height() ;

 $(this).attr( "height", "+ height" );
 });
});

Any ideas?

jon z
  • 3
  • 3
  • 1
    Check out this post: http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript – Gene Parmesan Nov 05 '12 at 19:28
  • Not sure img.load() is always triggered in all browsers for cached image. Same for broken image. Could someone confirm or infirm? – A. Wolff Nov 05 '12 at 19:31
  • yes i saw that post but i dont see how to apply it as a height attr to the image? – jon z Nov 05 '12 at 19:31

2 Answers2

1

From jQuery documentation :

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

It doesn't fire correctly in WebKit if the image src is set to the same src as before

It doesn't correctly bubble up the DOM tree Can cease to fire for images that already live in the browser's cache

You may use this :

var img = $('img').get(0); // no better selector ?
if (img.height) alert('height is '+img.height);
else img.onload = function(){alert('height is '+img.height)};

In a cleaner way :

function onImgLoaded(img, callback) {
   if (img.width) callback(img));
   else img.onload = function(){callback(img)};
}
onImgLoaded($('img').get(0), function(img){
    alert('height is '+img.height);
});
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
0

A little unclear here whether or not you need the height of the image before you write to the DOM. here's how to get the width & height with straight javascript:

var img   = document.getElementById('image_id'); 
var img_w = img.clientWidth;
var img_h = img.clientHeight;

here's how to do it with jQuery:

var img   = $("<img src='image_url' />");
var img_w = img.width;
var img_h = img.height;

good luck...

answer appended:

var img_h; var img_w;
var img = new Image();
img.src = img_src;
img_h   = img.height;
img_w   = img.width;
document.write( "<img src=" + img_src + " height=" + img_h + " />" );
airyt
  • 354
  • 2
  • 9
  • Doesn't work if image isn't in cache as loading is asynchronous. – Denys Séguret Nov 05 '12 at 19:32
  • yes, i do need it to load before the DOM. its for a masonry layout, so without the images height set first the images overlap which is why I need to apply the height as an attr – jon z Nov 05 '12 at 19:36
  • then you're probably going to have to do it with some simply javascript and a document.write command. check my edit for code. – airyt Nov 05 '12 at 19:51