JS检测图片是否加载完成，未加载完成前显示loadding图片

发布时间：2019-07-14作者：laosun阅读（2911）

有这么几种场景需要在图片加载完成前显示loadding图片。比如生成动态图片、支付二维码等。

在请求的后台的时候，需要提前展示一张loadding图片进行等待提示，避免白花花一片，误以为功能不好使。

<img id="qrcode" src="${ctx!}/assets/images/wx_loading.gif">

//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
//判断是否加载完成
function verifyLoadImage(url, imgid, callback){    
    var val=url;
    var img=new Image();
    if(Browser.ie){
        img.onreadystatechange =function(){  
            if(img.readyState=="complete"||img.readyState=="loaded"){
                callback(img,imgid);
            }
        }        
    }else if(Browser.Moz){
        img.onload=function(){
            if(img.complete==true){
                callback(img,imgid);
            }
        }        
    }    
    //如果因为网络或图片的原因发生异常，则显示该图片
    img.onerror=function(){
    	showAlert("加载失败，请刷新页面重新加载", baseTime);
    	img.src='${ctx!}/assets/images/loading-fail.png'
    }
    img.src=val;
}

调用的时候使用：

window.onload=function(){
    verifyLoadImage("${ctx!}/test/initQrcode${suffix!}?id=${id!}", "qrcode", loadFinish);
}

 发表评论

 请文明留言

  发表

共 2 条评论