（循环中的图像）大量图像，如果图像确实存在则显示图像，否则删除/隐藏图像节点

Question

我有大量图片

其实我有点担心检查真实存在的图像，如果图像存在也想做点什么 如果没有找到，我正在做其他工作。

注意： 如果一张图片正在服务器上检查并且需要 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 并调用 callBack 函数，然后调用 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);

在这里你可以传递你的图像源和检查源后要执行的功能。 它将检查您的图像是否存在，您可以在回调函数中获取状态（真或假）， 现在你可以在回调函数中根据需要做你的事情了。