需求简介:每个页面有一个弹窗,对应弹窗内容有一张广告图,当对应的广告图不存在的时候,加载使用默认的广告图。弹窗使用的是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();
由于方法一这样一个瑕疵,想到使用另外一个思路:页面加载的时候就异步判断对应的图片是否存在,若不存在则加载默认图片,若存在就加载对应的图片。关键部分为页面加载的时候的异步判断,未完待续