Question

我正在尝试检查图片网址：

function testImage(URL) {
    var tester=new Image();
    tester.onload = function(){ return true}
    tester.onerror= function(){ return false}
    tester.src=URL;
}

并使用此函数获取响应：

function image() {

  var image = $(".image").val(); 

  if(testImage(image)){
    $("#display").css({
      'background-image' : 'url('+ image +')',
      'background-size'  : 'cover',
      'display'  : 'block'
    });
  } else {
    $("#display").css({
       'display'  : 'none'
    });
    return true;
  } 

}

但由于某种原因它不起作用..一直试图找到解决方案几个小时..但如果我替换第一个功能代码：

 tester.onload = function(){alert("Yes")}
 tester.onerror= function(){ alert("Nope")}

它将正确显示所有警报，具体取决于图像网址是否存在..

如何检查testImage函数是返回true还是false以便我可以正确实现？

Answer 1

tester.onload和tester.onerror是在图像加载时异步执行的回调。您正在那里设置回调，但不会立即调用它们。它们的返回值不会成为testImage的返回值。您没有从testImage返回任何内容，因此它返回undefined，在if语句中的结果为false。

相反，请考虑为要应用的每组样式创建一个回调函数，并将这些回调传递到testImage，为onload设置一个，为onerror设置一个。

像这样：

function testImage(url, success, failure) {
    var tester = new Image();
    tester.onload = success;
    tester.onerror = failure;
    tester.src = url;
}

function successCss() {
    //...
}

function failureCss() {
    //...
}

testImage('path/to/your/image.png', successCss, failureCss);

jquery将返回引用传递给另一个func

1 个答案: