Question

我有一个密码。它正在验证图像的存在。如果不是“返回true”，它会完美地工作。我设置为“ alert（“ exists”）;“。

带有“ return true;”返回“未定义”；为什么代码不能与“ return true;”一起使用？

我发布了这样的代码gallery.VerifyImg("https://jonarhipov.neocities.org/2.png");

var gallery = {
    items: [],
    ItemsConstructor: function ItemsConstructor(img_url) {
        this.img_url = img_url;
    },
    CreateItem: function LoadImage(i) {
        /*
        gallery.items[i] = new ItemsConstructor("https://jonarhipov.neocities.org/" + i + ".jpg");
        $(".gallery").append("<div class='item' style='background-image: url(" + gallery.items[i].img_url + ")'></div>");*/
    },
    VerifyImg: function VerifyImg(url) {
        var success;
        var img = new Image();
        img.src = url;
        img.onload = function(){return true;};
        img.onerror = function(){return false;};

    }
}

谢谢！

Answer 1

或者使用回调函数代替promise

    var gallery = {
    items: [],
    ItemsConstructor: function ItemsConstructor(img_url) {
        this.img_url = img_url;
    },
    CreateItem: function LoadImage(i) {
        /*
        gallery.items[i] = new ItemsConstructor("https://jonarhipov.neocities.org/" + i + ".jpg");
        $(".gallery").append("<div class='item' style='background-image: url(" + gallery.items[i].img_url + ")'></div>");*/
    },
    VerifyImg: function VerifyImg(url,cb) {
        var success;
        var img = new Image();
        img.src = url;
        img.onload = cb;
        img.onerror = cb;

    }
}

如此调用

gallery.VerifyImg(url,function(response) {
  console.log(response.type) //returns load or error
})

Answer 2

VerifyImg: function VerifyImg(url) {
        var success;
        var img = new Image();
        img.src = url;
        img.onload = function(){return true;};
        img.onerror = function(){return false;};

    }

return true;在这种情况下是从内部函数img.onload处理程序返回的，这就是VerifyImg返回undefined的原因。您应该执行以下操作（同步解决方案）：

var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();

return http.status >= 200 && http.status < 400;

如果您想要现代的异步解决方案，则可以使用fetch函数：

return fetch(url, {method: "HEAD"}).then(data => data.status >= 200 && data.status < 400);

这两个版本的代码都不会从服务器上下载整个图像，它们会使用HEAD请求检查它是否存在，这样更快并且节省了流量。

Answer 3

您的方法几乎是正确的，由于图像加载是异步的，您只需要返回Promise：

VerifyImg: function VerifyImg(url) {
    var promise = new Promise();
    var img = new Image();
    img.src = url;
    img.onload = promise.resolve;
    img.onerror = promise.reject;
    return promise;

}

如果链接存在图片，则返回true，否则返回false

3 个答案: