前端检测图片加载失败,替换图片

最近做的一个系统出现了问题,标签添加src属性,但是你怎么知道这个路径是否无效呢?
废话不多说,

//检查图片是否存在
function CheckImgExists(imgurl) {
    var ImgObj = new Image(); //判断图片是否存在
    ImgObj.src = imgurl;
    //没有图片,则返回-1
    if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
        alert('存在')
    } else {
       alert('不存在')
    }
},

这样试了之后发现不行,因为进不到if里面,每次都是进入到else里面。找原因找了一会儿,出现了一个大胆的猜测,是因为赋值src成功但是还没有加载到,所以获取不到大小及宽高。

然后升级版本出现了

//检查图片是否存在
CheckImgExists(imgurl) {
    var ImgObj = new Image(); //判断图片是否存在
    ImgObj.src = imgurl;
    //加了一个onload事件,赋值成功后进行加载之后获取宽高,
    ImgObj.onload = function(){
        //没有图片,则返回-1
        if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
             alert('存在')        
         } else {
             alert('不存在')
        }
    }

},

注:升级版本是在原作者之上进行修改。

解决了问题,在此感谢作者,原文链接:http://www.52jb.net/biancheng/3097.html

你可能感兴趣的:(img,javascript,img,onerror)