原生jq实现loading加载形式

最新推荐文章于 2023-03-17 15:15:59 发布

人禺是页

最新推荐文章于 2023-03-17 15:15:59 发布

阅读量882

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_44053324/article/details/105422987

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

##jq实现loading加载形式

<div id="result"></div>
<script>
/**
* content 展示的内容
* awidth 可以不填，调整居中位置
*/
function loadingDiv(content, awidth) {
            //获取浏览器页面可见高度和宽度
            var _PageHeight = document.documentElement.clientHeight,
                    _PageWidth = document.documentElement.clientWidth;
            //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
            awidth = awidth ? awidth : 215;
            var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
                    _LoadingLeft = _PageWidth > awidth ? (_PageWidth - awidth) / 2 : 0;
            var _LoadingHtml = '<div class="img-preview" id="loadingDiv" style="position:absolute;left:0;width:100%;height:'
                    + _PageHeight + 'px;top:0;background:;opacity:1;filter:alpha(opacity=80);z-index:10000;">' +
                    '<div style="position: absolute; cursor1: wait; left: '
                    + _LoadingLeft + 'px; top:'
                    + _LoadingTop + 'px; width: auto; height: 60px; line-height: 60px; padding-left: 60px;' +
                    ' padding-right: 5px; background: #ffffff ' +
                    'url(../login/images/loading.gif) no-repeat scroll 5px 10px; border: 1px solid #dcdcdc; ' +
                    ' font-family:\'Microsoft YaHei\';">' + content + '</div></div>';
            return _LoadingHtml;
        }
        function romveLoading() {
            var loadingMask = document.getElementById('loadingDiv');
            loadingMask.parentNode.removeChild(loadingMask);
        }
    $("#result").html(loadingDiv("正在读取Ukey，请稍后"));
    setTimeout('romveLoading()', 1000);//一秒后关闭
    $("#result").html(loadingDiv("远程服务器正在进行登录校验，请稍后", 305));
    setTimeout('romveLoading()', 3000);//三秒后关闭
</script>