javascript - 在图片加载或验证图片 URL时调用

Question

我正在制作一个包含一些输入等的表单......其中一个要求提供图片的 URL，我希望浏览器验证给定的 url 或图片是否处于活动状态并且正常工作。

所以我img在 url 输入旁边有一个元素，当这个输入模糊时，src该 img 的属性会自动随 javascript 更改并设置为给定的 url。我想确定图像是否正确加载，或者它不工作。我不知道是否有没有 img 元素的功能，但请帮忙。

Answer 1

您可以在DOM 元素上使用onerror和onload事件。img只需确保在实际设置src图像属性之前设置回调。以下代码可用于检查 URL 是否为有效的图像 URL。您可以使用类似的代码来检查图像是否已加载到现有img元素中（只需选择该元素而不是创建新元素）。

var checkImage = function (url) {

  var image = document.createElement('img');

  image.onerror = function () {
      // image has failed to load
      console.log('url is not valid');
  };

  image.onload = function () {
      // image has loaded successfully
      console.log('url is valid');
  };

  image.src = url;
};

Answer 2

或者，您可以执行以下操作：

$.ajax({
    url:'http://www.example.com/yourimage.jpg',
    type:'HEAD',
    error: function(){
            //do sth to handle error
           },
    success: function(){
            //do sth when load succeeded
           }
});

上面的代码应该检查错误，比如 404 等。

另外，您可能想看看这个答案。

Answer 3

使用 jQuery：http: //jsfiddle.net/0kwsetp1/1/

$("input").on("blur change", function () {
    var image = $("#the-image"),
        $this = $(this),
        string = $this.val();

    image[0].onerror = function () {
        alert("Image could not be loaded");
    };
    image.attr("src", string);
});

感谢比尔指导我onerror。