发布时间:2019-07-14作者:laosun阅读(3198)
有这么几种场景需要在图片加载完成前显示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); }
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/7a2317c0576d4eada8f552599972ced1.html
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
关键字: jquery 前端 源码 javascript