CODEWITHSUNDEEP
javascriptfunction
Tom
Tom

Reputation: 543

problem with javascript and returning a value

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

Upvotes: 1

Views: 86

Answers (6)

Matt Ball
Matt Ball

Reputation: 359776

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/

Upvotes: 2

Biraj Pandey
Biraj Pandey

Reputation: 104

Ok... I went through your code and found a problem with your script. You are using image.onload function, so when u load image source, image loads and then only dimension are available and stored on the window.imgwidth.

All goes fine, but problem is, when u call the function, it takes time to load the u image, so if you try to get the window.imgwidth, as the resource is still loading you wont get the window.imgwidth. Return value also will not work as codes do not wait till the image loads so although the image is loading the code block execution will be completed so you wont have any data in window.imgwidth.

If you try to alert window.imgwidth after certain duration when image loading is completed then you can see that window.imgwidth has the value. And also you have the if block which stores the data in window.imgwidth only when the height more than 300 but you dont have else block so you need to implement that too as a fallback :) .

Let me know if i said it hard way :-D

Upvotes: 0

Seth
Seth

Reputation: 6260

Looking at your code it seems the issue is you aren't technically loading the image before trying to get the height because you are setting the src after the the onload call.

If you are using jQuery you should try and leverage it.

function find_image(imgsrc) {

    var imgWidth,
        img = $('<img/>').attr('src', imgsrc).load(function() {

        var $img = $(this),
            height = $img.height(),
            width = $img.width();

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

    });

    return imgWidth;

}

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

Ok. Another stab at this, @Tom.

There may be two issues here, from what I can see.

  1. There will be no calculation of window.imgwidth if your if statement returns false, as this appears to be the only place you are calculating it.

  2. The window.imgwidth is being calculated in function test() but not returned.

Upvotes: 0

Suraj Chandran
Suraj Chandran

Reputation: 24791

OK try this. You have to return the value of window.imgwidth within the function test:

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;
               console.log(Math.ceil(width/x));
               window.imgwidth = Math.ceil(width/x);
               console.log(window.imgwidth);
               alert (window.imgwidth);
               return window.imgwidth;
           }
        }

        img.src = imgsrc;
}

Upvotes: 0

Jason Miesionczek
Jason Miesionczek

Reputation: 14448

The problem i think is when you execute find_img_dm, you are trying to return the width value immediately. This won't work because the img.onload most likely won't be fired before the function finishes executing.

What you would need to do is in the onload event handler, put a call to another function, passing in the width value, and have that function do what you need to do when the image is loaded. Then you will know that at that point, the image is loaded and the width value is available.

Upvotes: 0

Related Questions