1

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 ?

medBouzid
  • 6,333
  • 8
  • 46
  • 72

4 Answers4

3

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.

adeneo
  • 293,187
  • 26
  • 361
  • 361
  • Also worth mentioning that the `load` event must be attached directly to the image (as you do here) -- it won't bubble up like other events do, so delegation won't work. – Blazemonger Oct 01 '13 at 17:58
  • i try to get also height (var height = this.height();) but it show me TypeError: this.height is not a function [Break On This Error], what is wrong here ? – medBouzid Oct 01 '13 at 18:14
  • `.height()` is a jQuery method; you need `var height=$(this).height();` or `=this.height;` – Blazemonger Oct 01 '13 at 18:16
  • at the least of your code i add console.log(width); but it shows me undefined :( – medBouzid Oct 01 '13 at 18:23
  • @adeneo if i move console.log(width) inside $("#image").on('load',function(){ console.log(width)}); it work fine, i have already declared var width variable outside load function, what is wrong here ? – medBouzid Oct 01 '13 at 18:33
  • 1
    @medBo - It's async, so you can't move it out of the load callback – adeneo Oct 01 '13 at 19:34
  • don't understand 100% what means async but look like i understand 40% :p it works fine now thank you :) – medBouzid Oct 01 '13 at 19:48
1

The load event will fire when the image has updated:

$("#image").attr("src", image_src)
    .load(function () {
      $(this).width(); // the new image width
    })
Jivings
  • 21,712
  • 6
  • 52
  • 95
  • 1
    [Not always](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached). – Blazemonger Oct 01 '13 at 17:54
0

You can use load function

function modify_image(image_src){
   var img = new Image();
   img.src = image_src;
   img.onload = function () { 
       var width = img.width; 
    };
   $("#image").attr("src", img.src);
}

In load function you can fetch its properties such as height

Satpal
  • 126,885
  • 12
  • 146
  • 163
0

Here's my flavour:

    function modify_image(image_src){
       $("#image").attr("src", image_src).load(function () {
            console.log($(this).width());
        });
    }
Blazemonger
  • 82,329
  • 24
  • 132
  • 176
NicolasMoise
  • 7,171
  • 10
  • 42
  • 65