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,哇哈哈~

技苑
请先登录后发表评论
  • 最新评论
  • 总共1条评论
技苑

晓晓:1

2018-08-18 12:28:34回复

  • © 2016-2018 技苑 版权所有 ICP证:鄂ICP备15021999号-2
  • 联系邮箱:master@pengxb.com