Question

我正在尝试使用JavaScript验证图片网址是否存在。基本上我想将URL分配给图像，如果它有效。但是，验证URL的JavaScript函数（不是逐行执行）会中断逻辑并使所有URL返回true。有没有什么办法可以把控件放在urlExists函数中，直到它的所有线程完成？

当前控件不等待错误消息的结果并跳过它以返回到始终具有true值的调用函数。任何想法如何在这里使功能保持控制？

function urlExists(testUrl) {
    var ret = true;
    var newImage = new Image();
    newImage.src = testUrl;
    $(newImage).error(
        function(){
            ret = false;
        }
    );
    return ret;
}
function changeImagePath(obj){
    var oldUrl = obj.src;
    var newUrl = oldUrl.replace("abc","xyz");
    if(urlExists(newUrl)){
        obj.src = newUrl;
    }   
}

<img src="http://sample.com/images/srpr/logo_abc.png" onclick="changeImagePath(this)" />

还要提到我正在处理跨域图像URL。

Answer 1

您可以将代码作为回调函数传递以修改现有图像。无需创建新图像即可执行检查：

function urlExists(img, newUrl, callback) {
  $(img).error(callback).attr('src', newUrl);
}

function changeImagePath(obj) {
  var oldUrl = obj.src;
  var newUrl = oldUrl.replace("200", "x");
  urlExists(obj, newUrl, function() {
    obj.src = oldUrl;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Click to attempt to change the image
<img src='https://placekitten.com/g/200/300' alt='cat' onclick='changeImagePath(this);'>

正如您在浏览器的控制台中看到的那样，HTTP请求已完成，并且未找到404。要尝试成功的情况，请将上例中的“x”更改为250之类的数字。

javascript对象

1 个答案: