Question

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?

Answer 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);
});