Question: I have a function that if i pass a source of image to it, it should modify the src attribute of $("#image") element, this function is called when i click a button which isn't inside a form (this means that page is not reloaded)

```
function modify_image(image_src){
   $("#image").attr("src", image_src);
}

```

how i can get the width of this image after his **src** changed ?

Answer: 
Loading an image is async, so you have to wait until it's loaded to get the width :

```
function modify_image(image_src){
   $("#image").on('load', function() {
       var width = this.width;
   })
   .attr("src", image_src)
   .each(function() {
        if (this.complete) $(this).trigger('load');
   });
}

```

**Always** change the source *after* the `onload` event handler has been attached, and for cached images you *must* check the `this.complete` property and trigger the `onload` event yourself.
The load event will fire when the image has updated:

```
$("#image").attr("src", image_src)
    .load(function () {
      $(this).width(); // the new image width
    })

```