Question

我正在尝试预定是给定的url是否是有效图像。在JS中，理想情况下看起来像

if (isValidImg(url)){
    ...add image DOM
} else { ... discard...}

鉴于img.src异步发生，如何同步知道url是否为有效图像？

存在有效含义，并且具有与图像相关的格式或mime类型。

“http://google.com/fake.img”无效

“http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=a7723f5f7e59”有效

Answer 1

同步执行此操作会非常疯狂，但您可以异步执行此操作。在现代浏览器中，或在任何浏览器中使用Promise填充程序/库，您可以这样做：

function isValidImg( url ) {
    return new Promise( function ( resolve, reject ) {

        var image = new Image;

        image.onload = function ( ) { resolve( image ) };
        image.onerror = image.onabort = reject;

        image.src = url;
    } );
}

改编自jfriend00's answer here，可在任何浏览器中使用，无需Promise库。然后像这样使用它：

isValidImg( url ).then( function ( image ) {
    // Add image to DOM
}, function ( event ) { 
    // Handle error
    // Note: This will be reached when the image fails to load
    //       whether that be because it's not a valid image or 
    //       any other reason.
} );

Answer 2

正如您对问题的评论所表明的那样，您应该尝试在任何时间和地点使用异步请求而不是同步请求。

您应该向网址发送HEAD请求，并检查Content-Type标头是否为有效的图片类型。

<强>异步

var request = new XMLHttpRequest();
request.open('HEAD', url);
request.onreadystatechange = function()
{
    if (request.readyState == 4 && request.status == 200)
    {
        var contentType = request.getResponseHeader('Content-Type');
        if (contentType.slice(0,6) === 'image/')
            // URL is valid image
    }
};
request.send();

同步（不要这样做！）

var request = new XMLHttpRequest();
request.open('HEAD', url, false);
request.send();
if (request.readyState == 4 && request.status == 200)
{
    var contentType = request.getResponseHeader('Content-Type');
    if (contentType.slice(0,6) === 'image/')
        // URL is valid image
}

同步检测给定的url是否是JS中的正确图像

2 个答案: