JavaScript检查远端图片是否存在

pengxb
2017-12-22 10:27:43
JavaScript
JavaScript

在平常开发的时候，特别是前台开发，经常会碰到图片加载不出来的情况，这时就会显示一张破图在那，会导致整个页面都变得很丑，那么这个时候，最好的解决办法呢，就是放一张默认图片在那。也就是说，在加载这张图片的时候，我们需要去检测这张图是否真实存在，存在则加载，不存在则显示默认图。那么，如何有效快速的判断图片是否存在呢？下面就是核心代码：

/**
 * 检查远端图片是否存在
 * imgPath  图片访问地址
 * option    回调参数   
 */    
function checkImg(imgPath,option){
    if(typeof option.totalNum == 'undefined') option.totalNum = 1 ;
    if(option.totalNum>10){
        typeof option.error == 'function' && option.error();
        return;
    }
    var ImgObj=new Image();
    ImgObj.src= imgPath;
    ImgObj.onload=function(){
        typeof option.success == 'function' && option.success();
    }
    ImgObj.onerror=function(){
        option.totalNum++;
        setTimeout(function(){
            checkImg(imgPath,option);
        },1000);
    }
}

该方法在检测图片不存在，会反复回调请求10次，如若依然请求不到，就会停止请求，调用回调参数里面的error方法并返回，下面就是调用方法的demo：

//检测图片是否存在
checkImg(imgPath,{
    success:function(){
        //......
        $(this).find('img').attr('src',imgPath).show();
        //......
    },
    error:function(){
        //......
    }
});

哈哈，核心的就这么多啦！当然，还有进一步升级的方向：检测到图片存在之后，拿到图片的真实宽高比，与显示的div宽高比做对比，然后做计算，根据产品设计来显示图片。不过，这就看你们产品的喜好咯，哈哈~

注：上面这种适用于图片上传，需要 即时显示 的情景，其实，还有一种方法，适用于 页面初始化渲染的情景，那就是img标签的 onerror 事件：

说明：

onerror 事件会在文档或图像加载过程中发生错误时被触发。

在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。

至于怎么写，请自行Google，哇哈哈~

没有难的技术，当你弄清它的原理时，你会发现原来如此简单~ 欢迎加群【536501561】讨论