直接可用的loading.js

Posted 2020-12-12 yang

loading.js

function includeStyleElement(A, e) {
    if (!document.getElementById(e)) {
        var t = document.createElement("style");
        t.id = e, (document.getElementsByTagName("head")[0] || document.body).appendChild(t), t.styleSheet ? t.styleSheet.cssText = A : t.appendChild(document.createTextNode(A))
    }
}

function openJsLoading(A) {
    var e = "loadingStyle",
        t = "jieshunLoading",
        n = document.getElementById(e);
    n && n.parentNode.removeChild(n);
    n = document.getElementById(t);
    n && n.parentNode.removeChild(n), includeStyleElement(styleString, e);
    var a = document.createElement("div");
    a.id = t, a.className = "jieshun-loading";
    var l = document.createElement("div");
    l.className = "text-box", a.appendChild(l);
    var i = document.createElement("img");
    i.src = "data:image/gif;base64,R0lGODlhJQAlAJECAL3L2AYrTv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAAJQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaMk+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iGxcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nLXAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEADAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQFCgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnAagwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoACwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQFCgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWEj6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwBABEADAADAAACBYSPqcsFADs=", l.appendChild(i);
    var d = document.createElement("span");
    d.innerhtml = "  " + (A || "加载中..."), l.appendChild(d), document.querySelector("body").appendChild(a)
}

function closeJsLoading() {
    var A = "jieshunLoading",
        e = document.getElementById(A);
    e && e.parentNode.removeChild(e)
}
var styleString = ".jieshun-loading{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.3);text-align:center;z-index:10000}.jieshun-loading .text-box{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%)}.jieshun-loading .text-box img{width:26px;height:26px;display:inline-block;vertical-align:middle}.jieshun-loading .text-box span{display:inline-block;vertical-align:middle}";

 

调用：openJsLoading()

关闭：closeJsLoading();

function includeStyleElement(A, e) {

    if (!document.getElementById(e)) {

        var t = document.createElement("style");

        t.id = e, (document.getElementsByTagName("head")[0] || document.body).appendChild(t), t.styleSheet ? t.styleSheet.cssText = A : t.appendChild(document.createTextNode(A))

    }

}

function openJsLoading(A) {

    var e = "loadingStyle",

        t = "jieshunLoading",

        n = document.getElementById(e);

    n && n.parentNode.removeChild(n);

    n = document.getElementById(t);

    n && n.parentNode.removeChild(n), includeStyleElement(styleString, e);

    var a = document.createElement("div");

    a.id = t, a.className = "jieshun-loading";

    var l = document.createElement("div");

    l.className = "text-box", a.appendChild(l);

    var i = document.createElement("img");

    i.src = "data:image/gif;base64,R0lGODlhJQAlAJECAL3L2AYrTv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAAJQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaMk+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iGxcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nLXAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEADAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQFCgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnAagwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoACwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQFCgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWEj6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwBABEADAADAAACBYSPqcsFADs=", l.appendChild(i);

    var d = document.createElement("span");

    d.innerHTML = "  " + (A || "加载中..."), l.appendChild(d), document.querySelector("body").appendChild(a)

}

function closeJsLoading() {

    var A = "jieshunLoading",

        e = document.getElementById(A);

    e && e.parentNode.removeChild(e)

}

var styleString = ".jieshun-loading{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.3);text-align:center;z-index:10000}.jieshun-loading .text-box{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%)}.jieshun-loading .text-box img{width:26px;height:26px;display:inline-block;vertical-align:middle}.jieshun-loading .text-box span{display:inline-block;vertical-align:middle}";