Question

function find_image_dm(imgsrc){
    window.imgwidth = ""; 
    var img = new Image();

    img.onload = function test() {
        var width = this.width;
        var height = this.height;

        if (height > 300) {
            var x = height/300;
            window.imgwidth = Math.ceil(width/x);
        }
    }

    img.src = imgsrc;

    return(window.imgwidth);
}

I want to return window.imgwidth so i can use it else where but if I try to alert it or anything like that it shows up blank. How do I return its value. window.imgwidth is my attempt to create a global variable. I do not need the width of the window

Answer 1

The problem with your attempt is that the onload callback executes asynchronously. Because of this, you cannot reliably return anything since the onload callback is executed at some future time. Instead of thinking in terms of return values, think about passing a callback function parameter to your find_image_dm function:

function find_image_dm(imgsrc, callback)
{
    var img = new Image();

    img.onload = function()
    {
        callback(this.width, this.height);
    };

    img.src = imgsrc;
}

Which you’d use like this:

function onReturnSize(w, h)
{
    console.log('image width is', w);
    console.log('image height is', h);
}

find_image_dm('http://placekitten.com/2200/1200', onReturnSize);

Demo: http://jsfiddle.net/mattball/pTKW4/