img.onload関数で変数を設定する方法

Question

からhere私はイメージが利用可能かどうかを確認する方法を学びました。

しかし、私は質問があります。私は変数を持っていて、私は彼女の値をIDで設定します。

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.checkImage = function (imageSrc, good, bad) { 
    var img = new Image(); 
    img.onload = good; 
    img.onerror = bad; 
    img.src = imageSrc; 
} 

私はこのようなアプリケーションのオブジェクトを持っています。たとえば

私はこれを持っています動作しません。イメージが利用できず、img.onerrorが発生した場合、app.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; 
} 
if(app.offline == true) 
{ 
    console.log('offline'); 
} 
else 
{ 
    console.log('online); 
} 

Answer 1

解決策が見つかりました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; 
    }); 
} 

Answer 2

問題を、ONERROR関数火災がより遅く、あなたが試すよりも、それをチェックすること： - 編集

はここに従うように私は、そのコードの上場後app.offline値を読み取ります。

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実行されます。確認しようとすると、エラー機能がまだ起動していません