0

My javascript code like this :

    function detect(URL) {
        var image = new Image();
        image.src = URL;
        var x = image.onload = function() {
            console.log(image.naturalWidth)
            console.log(image.naturalHeight)
            if(image.naturalWidth==275 && image.naturalHeight==233)
                return true
            return false
        }();
        return x;
    }
    console.log(detect('https://www.roseindia.net/javascript/appendChild-1.gif'));

Demo and full code like this : https://jsfiddle.net/ctnq03g3/

The result of console.log(image.naturalWidth) = 0 and console.log(image.naturalHeight) = 0

Should it have value 275 and 233

I make the code like that, because I want the detect method return true or false

How can I solve this problem?

moses toh
  • 12,344
  • 71
  • 243
  • 443
  • remove `console.log` from your last line - just execute the function like so: `detect('https://www.roseindia.net/javascript/appendChild-1.gif')` – Dan Kreiger Mar 08 '18 at 17:06
  • @Serge K. I had read it. But I don't find answer there – moses toh Mar 08 '18 at 17:07
  • Your call to detect only sets up an event handler, it does not (and cannot) wait for the handler to be triggered and return a result. – James Mar 08 '18 at 17:07
  • try use `image.width` and `image.height` instead naturalWidth – Kamil Kiełczewski Mar 08 '18 at 17:08
  • @KamilKiełczewski Why? – Reinstate Monica Cellio Mar 08 '18 at 17:08
  • @Kamil Kiełczewski, It's the same. It does not work. Should you try the fiddle before answer this question – moses toh Mar 08 '18 at 17:09
  • 1
    `var x = image.onload = function(){...}();` -> remove the last pair of brackets : you're assigning the result of the execution (true or false) to image.onload instead of the function itself. I tried it with your fiddle and got the expected result. – Aaron Mar 08 '18 at 17:09
  • @James I'm still confused. Please, answer with the code – moses toh Mar 08 '18 at 17:10
  • hm.. I run your Fiddle (without any changes) and i see in console: 0 0 false - and after some few secons: 275 233 true – Kamil Kiełczewski Mar 08 '18 at 17:11
  • @Aaron I want the result return `true` or `false` – moses toh Mar 08 '18 at 17:12
  • @Kamil Kiełczewski This is strange. Why the results can change? – moses toh Mar 08 '18 at 17:15
  • @Archer Why you mark my question is duplicate? I had read the question and I don't find answer there. So I make this question. If you mark this question is duplicate then other people can not answer this question – moses toh Mar 08 '18 at 17:16
  • Here is answer: https://stackoverflow.com/a/46399452/860099 - use async/await – Kamil Kiełczewski Mar 08 '18 at 17:17
  • @SuccessMan, you got `(width=0,height=0)` because it is the result before image loaded (bind one handler result to image.onload). – Sphinx Mar 08 '18 at 17:17
  • Yeah, but you want it when the image is loaded, not immediatly after you set up the `image.src`, so you shouldn't execute it at this point. Using `image.onload` is a fine solution but then you have to wait for the image to load to be able to return a result. That's where the asynchronous duplicate link comes in play I guess. – Aaron Mar 08 '18 at 17:17
  • When folks start using async they make the same mistake of trying to return a value from a piece of code that has not yet executed, which is very similar to what you are doing with your onload handler. The function detect will have returned before the onload handler is triggered. Get it? – James Mar 08 '18 at 17:19
  • @James, I don't think so, the question OP want to ask is why image.width/height is 0. Aaron explained well why the result is not expected. – Sphinx Mar 08 '18 at 17:22
  • @Sphinx OP is expecting a boolean return from detect, coming from calculations performed in the onload handler. – James Mar 08 '18 at 17:29
  • @SuccessMan Have you read and understood your problem since your last comment to me? – Reinstate Monica Cellio Mar 09 '18 at 08:46

0 Answers0