How setting a variable in img.onload function

Question

From here i learned how to check if an image is available or not.

But i have a question. I have a variable and i would set her value according id the image is available or not.

For example i have this:

app.checkImage = function (imageSrc, good, bad) {
    var img = new Image();
    img.onload = good; 
    img.onerror = bad;
    img.src = imageSrc;
}

I have an app object like this:

var app = {
    offlineChecked: false,
    offline: false,
  };

Inside another function i have this code listing:

if(app.offlineChecked == true)
      {
        //don't do nothing
      }
      else
      {
        app.checkImage("https://mysite" + data.image_150, 
          function(){ app.offline = false; }, 
          function(){ app.offline = true; });
        app.offlineChecked = true;
      }

But this doesn't work. app.offline is always false, in case the image isn't available and img.onerror fires.

Edit - i read the app.offline value after that code listing, as follow here:

if(app.offlineChecked == true)
{
      //don't do nothing
}
else
{
    app.checkImage("https://mysite" + data.image_150, 
      function(){ app.offline = false; }, 
      function(){ app.offline = true; });
    app.offlineChecked = true;
}
if(app.offline == true)
{
    console.log('offline');
}
else
{
    console.log('online);
}

Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — JJJ, Apr 13 '17 at 14:28

score 1 · Answer 1 · answered Apr 13 '17 at 14:29

Problem, that onerror function fires more late, than you try to check it. Try this example

var app = {
    offlineChecked: false,
    offline: false
};

var ready = false;

app.checkImage = function (imageSrc, good, bad, onready) {
    var img = new Image();
    img.onload = good;
    img.onerror = bad;
    img.src = imageSrc;
    img.onreadystatechange = onready;
};

if (app.offlineChecked == true) {
    //don't do nothing
}
else {
    app.checkImage("https://mysite",
        function () {
            app.offline = false;
        },
        function () {
            app.offline = true;
            alert(app.offline);
            ready =true;
        });
    app.offlineChecked = true;
}


setInterval(function () {
    if (ready) {
        alert(app.offline);
    }
}, 1000);

img.onload and img.onerror behave itself as callback, when scripts load or not, it runs onload or onerror. When you try to check it, onerror function doesn't yet launched

score 0 · Accepted Answer · edited May 23 '17 at 12:17

I found solution here.

That solved my problem. I write solution on it:

app.checkImage = function(imageSrc, imageChecked)
{
  var img = new Image();
  img.onload = function(){
     app.offline = false;
     imageChecked(app.offline);
  }
  img.onerror = function(){
     app.offline = true;
     imageChecked(app.offline);
  }
  img.src = imageSrc;
}

app.offline variable is set in the callback function as follows:

if(app.offlineChecked == true)
{
   /**Other operations here if app is offline or not*/
}
else
{
   app.checkImage("https://mysite" + data.image_150, function(offline)
   {
      app.offline = offline;
      if(app.offline == true)
      {
         console.log('offline');
      }
      else
      {
         console.log('online');
      }
      app.offlineChecked = true;
   });
}

How setting a variable in img.onload function

2 Answers2