JQ怎么跨域判断HTTPS的URL资源是否有效？

Question

有一个需求是这这样的，当页面加载完的时候，根据当前页面的URL，来判断对应的图片资源是否存在，如果存在则就用这个对应的图片，如果不存在则使用默认的图片。
假设当前页面URL：https://www.example.com/somep...
规则对应的图片文件是someid.png,图片的URL：https://imgs.example.com/imgs...
如果不存在这张图片，则使用默认的https://imgs.example.com/imgs...

这里的jquery 如何去判断 https://imgs.example.com/imgs...？

var popup = (
    function() {
        var target = window.location.href;
        var currentFilename = window.location.pathname.split("/")[window.location.pathname.split("/").length - 1].split(".")[0];
        var currentPopupImg = 'https://imgs.example.com/' + currentFilename + '.png';
        var defautlPopupImg = 'https://imgs.example.com/default.png';
        var picContent = "";
        var checkPopupImgOnce = function() {
            $.ajax({
                url: currentPopupImg,
                 cache: false,
                dataType:"jsonp",
                type: 'GET',
                complete: function(response) {
                    if (response.status == 200) {
                        picContent = currentFilename;
                    } else {
                        changePopUpImgSrc();
                    }
                }
            });
        }
        var changePopUpImgSrc = function() {
            picContent = defautlPopupImg;
        }
        var showPopUp = function() {
            var flag = 0;
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shade: 0,
                shadeClose: true,
                anim: 0,
                skin: 'popup',
                area: ['600px', '450px'],
                time: 12000,
                resize: false,
                btn: ['不再提醒', '稍后再说', '立即了解'],
                yes: function(index, layero) {
                    //按钮【按钮一】的回调
                    //永远关闭弹窗
                    flag = 1;
                    layer.closeAll();
                },
                btn2: function(index, layero) {
                    //按钮【按钮二】的回调
                    //$("#layui-layer1").hide();
                    //暂时关闭弹窗
                    flag = 0;
                    layer.close(index);
                },
                btn3: function(index, layero) {
                    //按钮【按钮三】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                    //打开快商通
                    //暂时关闭弹窗
                    flag = 0;
                    window.open('https://ad.example.com');
                    layer.close(index);
                },
                btnAlign: 'c',
                content: picContent,
                end: function() {
                    if (flag == 1) {
                        // 永远关闭弹窗
                        window.clearTimeout(timer);
                    } else {
                        timer = setTimeout(popup, 15000);
                    }
                }
            });
        }
        var pop = {
            checkimg: checkPopupImgOnce,
            showPopUp: showPopUp
        }
        return pop;
    })();
popup.checkimg();
popup.showPopUp();

Answer 1

利用 <img /> 标签，大致思路：

function isValidImage(url, successCallback, abortCallback, errorCallback) {
    var img = document.createElement('img');
    
    img.src = url
    
    img.onload = successCallback
    img.onabort = abortCallback
    img.onerror = errorCallback
    
    return img
}

Answer 2

@tanglijun

function imgNotFound() {
        var img = $(".popup img").get(0);
        //默认图片
        img.src = "//imgs.example.com/default.png";
        img.onerror = null;
    }
function popup() {
    var target = window.location.href;
    var filename = window.location.pathname.split("/")[window.location.pathname.split("/").length - 1].split(".")[0];
    var timer = null;
    //不永远关闭弹窗
    var flag = 0;
    layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        shade: 0,
        shadeClose: true,
        anim: 0,
        skin: 'popup',
        area: ['600px', '450px'],
        time: 12000,
        resize: false,
        btn: ['不再提醒', '稍后再说', '立即了解'],
        yes: function(index, layero) {
            //按钮【按钮一】的回调
            //$("#layui-layer1").hide();
            //永远关闭弹窗
            flag = 1;
            layer.closeAll();
        },
        btn2: function(index, layero) {
            //按钮【按钮二】的回调
            //$("#layui-layer1").hide();
            //暂时关闭弹窗
            flag = 0;
            layer.close(index);
        },
        btn3: function(index, layero) {
            //按钮【按钮三】的回调
            //return false 开启该代码可禁止点击该按钮关闭
            //打开快商通
            //暂时关闭弹窗
            flag = 0;
            window.open("https://ad.example.com);
            layer.close(index);
        },
        btnAlign: 'c',
        content: '<img width="600" height="385" onerror="imgNotFound();" src="//imgs.example.com/' + filename + '.png' + '"' + '/>',
        end: function() {
            if (flag == 1) {
                // 永远关闭弹窗
                window.clearTimeout(timer);
            } else {
                timer = setTimeout(popup, 15000);
            }
        }
    });
}
popup();

layer 是一个插件。这样的话控制台一直会有报错的可能