jquery load property on image

Question

why this is not working?

<script>    
$('#draggable3').load(function() {
 alert($("#draggable3").width());
 $("#containment-wrapper").width() = $("#draggable3").width() * 1.3;
 $("#containment-wrapper").height() = $("#draggable3").height() * 1.3;

});
</script>
<body>
<div id="containment-wrapper">
<div id="border-ornament"> 

<img id="draggable3" class="draggable ui-widget-content" src="img.jpg">

</div>
</div>
</body>

why event .load not working after image is loaded?

try : `$("#containment-wrapper").width($("#draggable3").width() * 1.3);`. — Ricardo Binns, Nov 08 '12 at 13:49
check out this topic, it may be related: http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached — halilb, Nov 08 '12 at 13:59

Dipak · Accepted Answer · 2012-11-08T13:54:28.620

Write width and height as -

$("#containment-wrapper").width($("#draggable3").width() * 1.3);
$("#containment-wrapper").height($("#draggable3").height() * 1.3);

and you need to write jquery in document.ready -

<script> 
$(document).ready(function(){
  $('#draggable3').load(function() {
     alert($("#draggable3").width());
     $("#containment-wrapper").width($("#draggable3").width() * 1.3);
     $("#containment-wrapper").height($("#draggable3").height() * 1.3);
  });
});   
</script>

Nikita U. · Answer 2 · 2012-11-08T14:00:19.507

At the time of the script working tag #draggable3 not yet exists. Try do this in document.ready function like this

$(function () {
    $('#draggable3').load(function() {
     alert($("#draggable3").width());
     $("#containment-wrapper").width() = $("#draggable3").width() * 1.3;
     $("#containment-wrapper").height() = $("#draggable3").height() * 1.3;

    });
});

Or you can put your script after your img tag.

jquery load property on image

2 Answers2