Question

我有一系列的图像链接，我从reddit获得，但一些图像网址被打破。我想跳过破碎的图片链接。

This thread建议使用.width来查看图片是否存在。我尝试使用this answer等待图片链接在执行代码之前加载，但它不起作用，它正在跳过我的if(this.width>0)检查。

var imgLinksArray = Array.from(imgLinks);
document.getElementById('photoGrid').innerHTML = "";
for (i = 0; i < imgLinks.length; i++) {
  var workingImgLink = imgLinksArray[i]

  var img = new Image();
  img.onload = function() {
    console.log(this);
    console.log(this.src + " Width: " + this.width);
    for (i = 0; i < imgLinks.length; i++) {
      var workingImgLink = imgLinksArray[i]

      if (this.width > 0) {
        console.log(this.width);
        if (workingImgLink.search("webm") >= 0) {
          document.getElementById('photoGrid').innerHTML += '<video autoplay loop class="box-wrapper"> <source  type="video/webm" src= "' + workingImgLink + '" data-url= "' + workingImgLink + '" class="box" style=background-image:url("' + workingImgLink + '")></video>';
        } else {
          document.getElementById('photoGrid').innerHTML += '<div class="box-wrapper"> <div  data-url= "' + workingImgLink + '" class="box" style=background-image:url("' + workingImgLink + '")></div></div>';

        }
      }
    }

  }
  img.src = workingImgLink;
  var bgImgWidth = img.width;
  var bgImgHeight = img.height;

}

如果我知道图像存在，我只想执行innerHTML代码。关于如何解决这个问题的任何建议？

在执行代码

0 个答案: