Question

我离开了这个帖子：

Check if image exists on server using JavaScript?

这是我试过的代码，它总是返回“okay”我认为这是因为异步/同步。它设置为false，但由于我在控制台中看到的警告，我将其设置为true。

我如何才能说不好？如果我在数组源中尝试3以上的任何东西，它会在控制台中出现404错误但看到“okay”

之后

<script>
  var photosArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
  var src = photosArray[5];
  console.log('src: ' + src);
  function imageExists(src){
    var http = new XMLHttpRequest();
    http.open('HEAD', src, true);
    http.send();
    if (http.status !== 404) {
      console.log('okay');
      return "okay";
    }
    else {
      console.log('fail');
      return "fail";
    }
    // return http.status != 404; original code's return
  }
  imageExists(src);
</script>

Answer 1

除此之外，还需要一个事件处理程序来执行测试。

<script>
 var photosArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
 var src = photosArray[4] + '?v=' + new Date().getTime(); // photosArray[5] doesn't exist because arrays are 0-indexed

 console.log('src: ' + src);

 function imageExists(src){
    var http = new XMLHttpRequest();
    var exists;

    http.open('GET', src, true);

    http.onreadystatechange = function(){
        if (http.readyState === 4 && http.status >= 200 && http.status < 300) {
            console.log('okay');
            exists = true;
            // do something
        }
        else {
            console.log('fail');
            exists = false;
            // do something
        }
        // do something, perhaps foo(exists);
    }

    http.send();

  }

  imageExists(src);
</script>

但是，您无法从此函数返回exists的值，因为XMLHttpRequest正如您所说的那样是异步的：imageExists()将在{{1}之前返回已经完成了，你会得到假阴性。返回事件处理程序也不会返回XMLHttpRequest的值，仅用于事件处理函数。当imageExists XMLHttpRequest（或在现代浏览器中，onreadystatechange）事件触发时，您可以做的最好的事情就是做。

您应该查看Promises，onload API，或在父作用域中创建变量（从事件处理程序更新它）并定期检查它，以确定图像是否存在。

或者，将fetch与父作用域中的变量一起使用，并在合理的时间后检查该变量＆＃39; - 提示：判断合理的时间应该是多少并不是一件简单的事情，因为测量客户的互联网连接速度几乎是不可能完成的任务，或者推导出任何合理的可靠估计值。时间量＆＃39;对于不同大小的图像。

另外，请注意，请求图像可能无法获得可靠的结果，因为浏览器可以缓存图像。因此，我为什么要使用window.setTimeout

将缓存清除字符串附加到src

你可以做的是在图像上附加事件处理程序，如下所示：

'?v=' + new Date().getTime();

或

<img src="/path/to/whatever.jpg" onerror="this.style.display='none'">

如果找不到图像，或者对图像的请求失败，则其中任何一个都可以隐藏图像。

编辑：根据您的评论，您可以采用以下方式：

＆＃13;

<style>img.not-loaded { display: none; }</style>
<img src="/path/to/whatever.jpg" class="not-loaded" onload="this.className=''">

＆＃13;

window.imageExists = function(main_img){
    main_img.className+=' loaded';
    [].slice.call(main_img.parentNode.querySelectorAll('.secondary-image')).forEach(function(this_img){
      this_img.src = this_img.getAttribute('data-src');
    });
  };

＆＃13;

  img { display: none; }
  img.loaded { display: block; width: 100%; }
  img.secondary-image.loaded { display: inline-block; width: 20%; }

＆＃13;

Answer 2

或者使用jQuery

$.post(src, {"photo": "1.jpg"}).done(function(data) {
    //Server returns 'true' or 'false'
    if(data) {
        console.log('okay');
    }
});

测试照片是否存在Javascript

2 个答案: