chaihongjun.me

搭配layer插件完成弹窗图片替换方法总结

搭配layer插件完成弹窗图片替换方法总结

需求简介:每个页面有一个弹窗,对应弹窗内容有一张广告图,当对应的广告图不存在的时候,加载使用默认的广告图。弹窗使用的是layer插件完成。

方法一的思路是:默认加载对应的图片,当图片不存在的时候出发img的error,然后替换图片为默认图片,方法一的缺点是,当不彻底关闭弹窗的时候,控制台会循环输出错误信息。

function imgNotFound() {
        var img = $(".popup img").get(0);
        //默认图片
        img.src = "//img.example.com/default.png";
        img.onerror = null;
    }
function popup() {
    //get current page filename
    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="//img.example.com/' + filename + '.png' + '"' + '/>',
        end: function() {
            if (flag == 1) {
                // 永远关闭弹窗
                window.clearTimeout(timer);
            } else {
                timer = setTimeout(popup, 15000);
            }
        }
    });
}
popup();

由于方法一这样一个瑕疵,想到使用另外一个思路:页面加载的时候就异步判断对应的图片是否存在,若不存在则加载默认图片,若存在就加载对应的图片。关键部分为页面加载的时候的异步判断,未完待续

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»