（ループ内の画像）の画像の巨大な配列と画像が本当に存在するならば、画像を表示する表示したいそうでない場合は、画像ノード

Question

を非表示/削除私は、画像

の巨大な配列を持って実際に私は少し心配しています実際に存在するイメージをチェックすることについて、イメージが存在する場合は何かしたい場合は と私は他の仕事をしています。

注：1枚の画像は、サーバ上のチェックや他の画像のためのループで処理する方法を3分間 を取るされている場合。イメージが存在しない場合

私はちょうど画像の下に見つけています： -

配列内の画像のn番目の数のために使用することができる標準的な方法を教えてください。

var urlArray = [{productImage:'http://www.queness.com/resources/images/png/appleeeeeee_ex.png'},{productImage:'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'},{productImage:'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_cooooooolor_272x92dp.png'},{productImage:'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}]; 

<div> 
    <img src=""> // actually this comes through urlArray 
</div> 

ありがとうございます！

Answer 1

イメージURLが存在するかどうかを確認したい場合は、javaScript でこれを試すことができます。すべてのURLを1つずつチェックしてコールバック関数を呼び出すと、次のURLのURLチェックが呼び出されます。 次のURLは、時間が経過しても、完了後にチェックされます。

function isImageExists(imgSrc, callBackAfterCheck) { 
    var img = new Image(); 
    img.onload = function() { callBackAfterCheck(true) }; 
    img.onerror = function() {callBackAfterCheck(false) }; 
    img.src = imgSrc; 
} 

var urlArray = [{productImage:'http://www.queness.com/resources/images/png/appleeeeeee_ex.png'},{productImage:'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'},{productImage:'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_cooooooolor_272x92dp.png'},{productImage:'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}]; 


var imageIndex = 0; 
function callBackAfterCheck(status){ 
    if(status == true){ 
    //do your stuff here 
    console.log('image Exist'); 
    }else{ 
    //do your stuff here 
    console.log('image not Exist'); 
    } 
    imageIndex++ 
    if(imageIndex < urlArray.length){ 
    var imageUrl = urlArray[imageIndex].productImage; 
    isImageExists(imageUrl, callBackAfterCheck) 
    } 
} 

var imageUrl = urlArray[imageIndex].productImage; 
isImageExists(imageUrl, callBackAfterCheck); 

ソースを確認した後で、イメージソースと実行する機能を渡すことができます。 イメージの存在をチェックし、コールバック関数 でステータス（trueまたはfalse）を取得できるようになりました。コールバック関数で必要に応じて処理を行うことができます。