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

发布时间:2019-07-14作者:laosun阅读(3272)

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

    有这么几种场景需要在图片加载完成前显示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);
    }


1 +1

版权声明

 jquery  前端  源码  javascript

 请文明留言

2 条评论