直接可用的loading.js

Posted yang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了直接可用的loading.js相关的知识,希望对你有一定的参考价值。

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}";

以上是关于直接可用的loading.js的主要内容,如果未能解决你的问题,请参考以下文章

封装 loading.js 文件 全局loading

如果没有可用的互联网,如何将 ContentView 设置为另一个片段,如果连接可用,如何恢复片段

javascript 无限漫画loading.js

loading js备份

Notepad++编辑器——Verilog代码片段直接编译

javascript 优化性能换画面数据-loading.js