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

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;
  } 

}

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

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

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

如何检查 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);