使用图片预加载,解决断网后无法从后台获取提示网络异常的logo图片的问题

项目中有需求,断网后,显示小提示窗,里面包含网络异常提示语和异常小logo图片。

在实际操作时,遇到,断网后,无法从后台获取异常小logo图片。

我是才用图片预加载的方法解决这个问题的,解决方法如下:

/*预加载图片*/
//var url = "http://192.168.0.5:8080/";
var url = getRootPath() ;
var urlImg = url+"/adms/********/images/messager-info.png";//警告图标路径
var imgPreLoadBox = [];

/*预加载图片*/
preLoadImgs(1,urlImg);

function preLoadImgs(i,url) {
    imgPreLoadBox[i] = new Image(); //创建一个Image对象,实现图片的预下载
    imgPreLoadBox[i].src = url;
}

/*将预加载图片插入到div*/
function appendImgTo(divId,img){
    if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
        $(divId).append(img);
        return; // 直接返回,不用再处理onload事件
    }

    img.onload = function () {
        $(divId).append(img);
    }
}



function getRootPath(){
    //获取当前网址,如: http://localhost:8083/uim/********/meun.jsp
    var curWwwPath=window.document.location.href;
    //获取主机地址之后的目录,如: uim/******/meun.jsp
    var pathName=window.document.location.pathname;
    var pos=curWwwPath.indexOf(pathName);
    //获取主机地址,如: http://localhost:8083
    var localhostPaht=curWwwPath.substring(0,pos);
    //获取带"/"的项目名,如:/uimcardprj
    //var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
    return localhostPaht;
}
原文地址:https://www.cnblogs.com/baiyangyuanzi/p/6625933.html