如何在img.onload函数中设置变量

Question

从这里我学会了如何检查图像是否可用。

但是我有一个问题。 我有一个变量，我将根据ID设置她的值，该图像是否可用。

例如我有这个：

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

我有一个这样的应用程序对象：

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

在另一个函数中，我有以下代码清单：

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;
      }

但这是行不通的。 app.offline始终为false，以防图像不可用并触发img.onerror。

编辑 -我在该代码清单后读取了app.offline值，如下所示：

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);
}

Answer 1

问题是，onerror函数的启动时间比您尝试检查的时间晚。 试试这个例子

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和img.onerror本身表现为回调，无论是否加载脚本，它都会运行onload或onerror。 当您尝试检查它时，onerror函数尚未启动

Answer 2

我在这里找到了解决方案。

那解决了我的问题。 我在上面写解决方案：

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变量在回调函数中设置如下：

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;
   });
}