Question

从here我学习了如何检查图像是否可用。

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

例如我有这个：

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

我有一个像这样的app对象：

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

我找到了解决方案here。

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

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

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

2 个答案: