0

I am trying to check image url:

function testImage(URL) {
    var tester=new Image();
    tester.onload = function(){ return true}
    tester.onerror= function(){ return false}
    tester.src=URL;
}

and get that response with this func:

function image() {

  var image = $(".image").val(); 

  if(testImage(image)){
    $("#display").css({
      'background-image' : 'url('+ image +')',
      'background-size'  : 'cover',
      'display'  : 'block'
    });
  } else {
    $("#display").css({
       'display'  : 'none'
    });
    return true;
  } 

}

But it doesn't work as for some reason.. Been trying to find the solution for hours.. But If I replace first func code to this:

 tester.onload = function(){alert("Yes")}
 tester.onerror= function(){ alert("Nope")}

It will show all alerts correctly depending if image url exist or not..

How do I check if testImage function returned true or false so I could implement it properly??

AlwaysConfused
  • 729
  • 2
  • 12
  • 37
  • Duplicate of http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – JCOC611 Dec 05 '15 at 01:22
  • See the `testImage()` function [here](http://stackoverflow.com/questions/9754292/javascript-verify-external-url-of-an-image/9754838#9754838). You cannot return an async result from your function. You have to use a callback as is done in the referenced answer. – jfriend00 Dec 05 '15 at 03:36

1 Answers1

1

tester.onload and tester.onerror are callbacks that are executed asynchronously when the image loads. You are setting the callbacks there, but they will not be immediately invoked. Their return values do not become the return values of testImage. You are not returning anything from testImage, so it is returning undefined, which evaluates to false in the if statement.

Instead, consider making a callback function for each set of styles you want to apply, and pass those callbacks into testImage, setting one for onload and one for onerror.

Like this:

function testImage(url, success, failure) {
    var tester = new Image();
    tester.onload = success;
    tester.onerror = failure;
    tester.src = url;
}

function successCss() {
    //...
}

function failureCss() {
    //...
}

testImage('path/to/your/image.png', successCss, failureCss);
Comptonburger
  • 583
  • 3
  • 10
  • Yeah thats what was original code before I messed up probably.. Now I got what you mean.. I was trying before to get the response from successCss func back to the image..Oh god..So hard to be noob these days.. Thanks for the explanation, I will test it out, if it works fine I will accept your answer! – AlwaysConfused Dec 05 '15 at 01:28
  • It works ok, but not as I need to be working..Because if I enter proper image url it shows up the image, if I mess up that url (for testing now) it will not show up and if I edit it again that url to another wrong url it will quickly show up the success func and then error one as it checks for these errors not on click fun but on keyup – AlwaysConfused Dec 05 '15 at 01:34