Question

我正在使用CasperJS来抓取一些项目，所以我无法及早到达页面以在img标签上添加加载和错误事件。我也不想为每个图像做一个新的XHR请求来确定它的有效性。

有没有办法选择图像标签并确定实际上是否有图像，或者是否显示替代文字？仅在页面完全加载后才使用JS。

这不是重复的。我特别询问是否有办法在没有其他网络请求的情况下执行此操作。其他问题只有答案需要使用新来源创建新图像，因此需要另一个网络请求。

/编辑

专门寻找断言是否在图像完成后加载（document.querySelector('#myImage').complete // returns true：

没有新的网络请求（包括使用新来源创建新图片）
没有onload / onerror事件（需要在加载页面之前这样做）
断言#myImage在没有上述

Answer 1

我不知道你将如何使用它，但这里是来自w3schools的代码片段。

    <!DOCTYPE html>
    <html>
    <body>

    <p>This example uses the HTML DOM to assign an "onerror" event to an img element.</p>

    <img id="myImg" src="image.gif">

    <p id="demo"></p>

    <script>
    document.getElementById("myImg").onerror = function() {myFunction()};

    function myFunction() {
        document.getElementById("demo").innerHTML = "The image could not be loaded.";
    }
    </script>

    </body>
    </html>

Answer 2

通过一些工作，我能够找到两种似乎有用的方法：

<强> HTML

<img id="imageA" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<img id="imageB" src="https://www.google.com/broken.png">

<强>设置

var imageA = document.querySelector('#imageA');
var imageB = document.querySelector('#imageB');

console.log(imageIsValid(imageA)); // returns true
console.log(imageIsValid(imageB)); // returns false

JavaScript方法1

function imageIsValid(img) {
  return !!img.naturalHeight && !!img.naturalWidth;
}

破碎图像的自然高度和宽度始终为0.

https://jsfiddle.net/2xLsenpp/

JavaScript方法2

function imageIsValid(img) {
  if (img.complete) {
    var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d');

    try {
      context.drawImage(img, 0, 0);
      return true;
    } catch(e) {
      return false;
    }
  }
  return false;
}

https://jsfiddle.net/8gdp8nzw/

无论如何要检查img标签是否坏了或404'd;没有add'l网络请求

2 个答案: