这是一个有效的测试，用于检查URL是否引用JS / jQuery中的Image [英] Is this a valid test to check if a URL refers to an Image in JS/jQuery

问题描述

$(function() {
    $("<img>", {
        src: "http://goo.gl/GWtGo",
        error: function() { alert("error!"); },
        load: function() { alert("ok"); }
    });
});

从如何测试URL是否是有效图像（在javascript中）？

更新

下一步将是：如何将此逻辑封装到函数中。我试过这个 - > http://jsfiddle.net/wp7Ed/2/

The next step will be: how can I encapsulate this logic into a function. I tried this -> http://jsfiddle.net/wp7Ed/2/

$(function() {
    function IsValidImageUrl(url) {
        $("<img>", {
            src: url,
            error: function() { return false; },
            load: function() { return true; }
        });
    }
    alert(IsValidImageUrl("http://goo.gl/GWtGo"));
    alert(IsValidImageUrl("http://error"));
});

但当然失败了......我如何从内部事件处理程序返回？或者我该如何实现呢？

but of course it fails... how can I return from an internl event handler? Or how can I implement this?

推荐答案

你不能在javascript中将异步调用变成同步调用。

You cannot ever turn an asynchonous call into a synchronous one in javascript.

错误和加载是异步事件，所以你必须这样做像这样：

error and load are asynchronous events, so you have to do it like this:

function IsValidImageUrl(url) {
    $("<img>", {
        src: url,
        error: function() { alert(url + ': ' + false); },
        load: function() { alert(url + ': ' + true); }
    });
}

IsValidImageUrl("http://goo.gl/GWtGo");
IsValidImageUrl("http://error");

或者您可以解析您在其他地方定义的回调函数，如下所示：

or you can parse in callback function you define elsewhere like this:

function myCallback(url, answer) {
    alert(url + ': ' + answer);
}

function IsValidImageUrl(url,callback) {
    $("<img>", {
        src: url,
        error: function() { callback(url, false); },
        load: function() { callback(url, true); }
    });
}

IsValidImageUrl("http://goo.gl/GWtGo", myCallback);
IsValidImageUrl("http://error", myCallback);

干净且高性能的版本会像这样跳过jQuery开销

The clean and performant version skips the jQuery overhead like this

function myCallback(url, answer) {
    alert(url + ': ' + answer);
}

function IsValidImageUrl(url, callback) {
    var img = new Image();
    img.onerror = function() { callback(url, false); }
    img.onload =  function() { callback(url, true); }
    img.src = url
}

IsValidImageUrl("http://goo.gl/GWtGo", myCallback);
IsValidImageUrl("http://error", myCallback);

这篇关于这是一个有效的测试，用于检查URL是否引用JS / jQuery中的Image的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！