CODEWITHSUNDEEP
javascriptjqueryimagesize
JHidalgo
JHidalgo

Reputation: 3

Get image size into a global variable before load and ready events

I've got a problem trying to get an image width and save it into a global var

Im doing this at the momment

var imgWidth;

var imgLoad = $("<img />");

imgLoad.attr("src", "Images/animals.jpg");
imgLoad.off("load");
imgLoad.on("load", function () {

  imgWidth = this.width;

  console.log(imgWidth); // It works! Inside function scope

});


console.log(imgWidth); // It doesn't work! Outside function scope

I know it's not working because Im trying to show the value outside the scope where the var was set.

The image wont be displayed, I just need the width and height using only a src. I will need the image width and image height in future functions so that's why I need to save it at least into global vars.

How can I solve it?

Thank you very much

Upvotes: 0

Views: 1509

Answers (2)

Martin Ernst
Martin Ernst

Reputation: 3289

You have no problem with scope but with timing. The console.log() outside the function does see the variable imgWidth, because its declared outside a function. It just has no value assigned so undefined is logged. The value (width) becomes assigned after the image has been loaded. The load takes some time, but the code does not wait so the last line is executed before imgwidth has got its value.

Check out the following:

var imgWidth;
var demo = 'demoValue';
var imgLoad = $("<img />");

// attach the event-handler BEFORE you set the src-attribute, otherwise it may happen
// that image is loaded before and the onload-function won't work
imgLoad.on("load", function () {
    imgWidth = this.width;
    // all variables declared outside are visible here
    console.log('inside: ', imgWidth); // --> inside: some px
    consolole.log('inside: ', demo); // --> inside: 'demoValue'
});
imgLoad.attr("src", "Images/animals.jpg");

// all variables declared outside a function are also visible here,
// but this runs before the image has finished loading
console.log('outside: ', imgWidth); // --> undefined only because it has no value at this time
console.log('outside: ', demo); // --> 'demoValue'

// now wait a second using a setTimeout
window.setTimeout(function() {
    // all vars are visible here, but now image is loaded and var imgwidth has got its value
    console.log('outsideLater: ' + imgWidth); // --> some px
    console.log('outsideLater: ' + demo); // --> 'demoValue'
}, 1000);

So the result is: your var declaration is OK, but all code that should do something with the image or its attributes must be inside your load-function, otherwise it will run too early.

Upvotes: 1

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

As you have it imgWidth is undefined outside your function because it is just an empty variable, you don't add nothing to it you are simply declaring it at the top. To make it work you need to do something like this

var imgWidth,
    imgLoad = $("<img />");

imgLoad.attr("src", "http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image5_170127819.jpg");

imgLoad.on("load", function () {
  imgWidth = this.width;
  console.log('Inside Function:'+imgWidth);
});

imgWidth = imgLoad[0].width;
console.log('Outside Function:'+imgWidth);

Working example here http://jsfiddle.net/kanzvoap/

Upvotes: 2

Related Questions