页面加载时的JavaScript加载屏幕_Javascript_Jquery_Html_Css_Loading

页面加载时的JavaScript加载屏幕

javascript jquery html css

页面加载时的JavaScript加载屏幕,javascript,jquery,html,css,loading,Javascript,Jquery,Html,Css,Loading,这有点难以解释，所以我会尽力的所以，当HTML页面加载时，我希望有一个很酷的加载屏幕。当它完成加载时，我希望加载屏幕被清除并显示HTML文档基本上，我想要这个： CSS: /*绝对中心CSS微调器*/ .装货{ 位置：固定； z指数：999；高度：2米；宽度：2米；溢出：显示；保证金：自动；排名：0；左：0；底部：0；右：0； } /*透明覆盖*/ .装货：之前{ 内容：''；显示：块；位置：固定；排名：0；左：0；宽度：100%；身高：100%；背景色：rgb

这有点难以解释，所以我会尽力的

所以，当HTML页面加载时，我希望有一个很酷的加载屏幕。当它完成加载时，我希望加载屏幕被清除并显示HTML文档

基本上，我想要这个：

CSS:

/*绝对中心CSS微调器*/
.装货{
位置：固定；
z指数：999；
高度：2米；
宽度：2米；
溢出：显示；
保证金：自动；
排名：0；
左：0；
底部：0；
右：0；
}
/*透明覆盖*/
.装货：之前{
内容：''；
显示：块；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.3）；
}
/*：not（：required）对IE9及以下版本隐藏这些规则*/
.加载：不（：必需）{
/*隐藏“加载…”文本*/
字体：0/0A；
颜色：透明；
文本阴影：无；
背景色：透明；
边界：0；
}
.加载：不（：必需）：之后{
内容：''；
显示：块；
字体大小：10px；
宽度：1米；
高度：1米；
边缘顶部：-0.5em；
-webkit动画：微调器1500ms无限线性；
-moz动画：微调器1500ms无限线性；
-ms动画：微调器1500ms无限线性；
-o动画：微调器1500ms无限线性；
动画：微调器1500ms无限线性；
边界半径：0.5em；
-rgba（0、0、0、0、0、0、0、0、0、0.75）1.5em 0 0 0 0 0、rgba（0、0、0、0、0、0、0、0、0、0.75）1.1em 1.1 1 1 1.1元1.1元1.1元0 0 0 0 0 0 0 0、rgba（0、0、0、0、0、0、0、0、0、0、0、0 0 0、0 0 0.75）1.1.1.1.1.1.1 1 1 1元1 1 1.1 1 1 1 1 1 1 1 1 1 1 1 1 1.1.1 1 1.1 1 1 1 1.1 1 1 1 1 1 1 1米1 1.1 1 1 1 1 1 1.1.1 1 1 1 1.1.1.1.1.1 1 1 1 1米1 1 1 1.1 1 1.1.1 1 1米0 0 0 0 0 0 0 0 0 0 0(一)；
长方体阴影：rgba（0,0,0,0.75）1.5em0 0，rgba（0,0,0,0.75）1.1em1.1em0，rgba（0,0,0,0,0.75）0 1.5em0 0，rgba（0,0,0,0,0,0.75）-1.1em1.1em0，rgba（0,0,0,0,0.75）-1.5em0 0，rgba（0,0,0,0.75）-1.1em0，rgba（0,0,0.0,0-1.0,0-1.1em0,0-1.0；
}
/*动画*/
@-webkit关键帧微调器{
0% {
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-ms变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
@-moz关键帧微调器{
0% {
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-ms变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
@-o关键帧微调器{
0% {
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-ms变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧微调器{
0% {
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-ms变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}

HTML:

加载&8230；

在页面加载时发生。当页面加载时，这将被清除，并显示HTML文档的其余部分。（我正在制作一个学分系统，当学分加载时，我真的需要它来告诉我它正在加载，人们抱怨他们不能点击任何东西，我不得不告诉他们它正在加载）

我希望尽可能远离Ajax，因为我想学习Javascript。

在加载脚本的开始，只需

通过css可见[

display:block；

]，并通过css使页面的其余部分不可见[

display:none；

]

加载完成后，只需使用相同的技术使加载不可见，页面再次可见。可以使用document.getElementById（）选择要更改显示的div

编辑：下面是它的样子。当主体完成加载时，它将调用javascript函数，该函数将更改不同元素的显示值。默认情况下，您的样式是页面不可见，加载可见

<head>
    <style>
        #page{
            display: none;
        }
        #loading{
            display: block;
        }
    </style>
    <script>
        function myFunction()
        {
            document.getElementById("page").style.display = "block";
            document.getElementById("loading").style.display = "none";
        }
    </script>
</head>

<body onload="myFunction()">
    <div id="page">

    </div>
    <div id="loading">

    </div>
</body>


#页面{
显示：无；
}
#装载{
显示：块；
}
函数myFunction（）
{
document.getElementById（“页面”）.style.display=“块”；
document.getElementById（“加载”）.style.display=“无”；
}

我建议在html中添加class

no js

，将CSS选择器嵌套在它下面，如：

.loading {
    display: none;
 }

.no-js .loading {
 display: block;
 //....
}

当您完成信用代码加载后，请将其删除：

$('html').removeClass('no-js');

这将隐藏您的加载微调器，因为html中没有

无js

类。这意味着您已经加载了您的信用代码，以进一步构建您可能使用或可能不使用的ajax部分（从注释中）

加载另一个页面并将其替换为当前页面的简单方法是：

<script>
    $(document).ready( function() {
        $.ajax({
            type: 'get',
            url: 'http://pageToLoad.from',
            success: function(response) {
                // response = data which has been received and passed on to the 'success' function.
                $('body').html(response);
            }
        });
    });
<script>


$（文档）.ready（函数（）{
$.ajax({
键入：“get”，
网址：'http://pageToLoad.from',
成功：功能（响应）{
//响应=已接收并传递给“成功”函数的数据。
$（'body'）.html（响应）；
}
});
});

您可以等到车身准备就绪：

函数onReady（回调）{ var intervalId=window.setInterval（函数（）{ 我

<script>
    $(document).ready( function() {
        $.ajax({
            type: 'get',
            url: 'http://pageToLoad.from',
            success: function(response) {
                // response = data which has been received and passed on to the 'success' function.
                $('body').html(response);
            }
        });
    });
<script>

$(document).ajaxStop(function(){
    alert("All AJAX requests completed");
});

// Function > Loader Screen Script
(function LoaderScreenScript(window = window, document = window.document, undefined = window.undefined || void 0) {
    // Initialization > (Processing Time, Condition, Timeout, Loader (...))
    let processingTime = 0,
        condition = function() {
            // Return
            return document.body
        },
        timeout = function() {
            // Return
            return (processingTime * 1e3) / 2
        },
        loaderScreenFontSize = typeof window.loaderScreenFontSize != 'undefined' ? window.loaderScreenFontSize : 14,
        loaderScreenMargin = typeof window.loaderScreenMargin != 'undefined' ? window.loaderScreenMargin : 10,
        loaderScreenMessage = typeof window.loaderScreenMessage != 'undefined' ? window.loaderScreenMessage : 'Loading, please wait&hellip;',
        loaderScreenOpacity = typeof window.loaderScreenOpacity != 'undefined' ? window.loaderScreenOpacity : .75,
        loaderScreenTransition = typeof window.loaderScreenTransition != 'undefined' ? window.loaderScreenTransition : .675,
        loaderScreenWidth = typeof window.loaderScreenWidth != 'undefined' ? window.loaderScreenWidth : 7.5;

    // Function > Update
    function update() {
        // Set Timeout
        setTimeout(function() {
            // Initialization > (Data, Metadata)
            var data = document.createElement('loader-screen-element'),
                metadata = setInterval(function() {
                    /* Logic
                            [if:else if:else statement]
                    */
                    if (document.readyState == 'complete') {
                        // Alpha
                        alpha();

                        // Test
                        test()
                    }
                });

            // Insertion
            document.body.appendChild(data);

            // Style > <body> > Overflow
            document.body.style = ('overflow: hidden !important; pointer-events: none !important; user-drag: none !important; user-select: none !important;' + (document.body.getAttribute('style') || ' ')).trim();

            // Modification > Data
                // Inner HTML
                data.innerHTML =
                    '<style media=all type=text/css>' +
                        'body::selection {' +
                            'background-color: transparent !important;' +
                            'text-shadow: none !important' +
                        '} ' +
                        '@keyframes rotate {' +
                            '0% { transform: rotate(0) }' +
                            'to { transform: rotate(360deg) }' +
                        '}' +
                    '</style>' +
                    "<div style='animation: rotate 1s ease-in-out 0s infinite backwards; border: " + loaderScreenWidth + "px solid rgba(0, 0, 0, " + loaderScreenOpacity + "); border-top-color: rgba(0, 51, 255, " + loaderScreenOpacity + "); border-radius: 50%; height: 75px; margin: 0 auto; margin-bottom: " + loaderScreenMargin + "px; width: 75px'> </div>" +
                    "<small style='color: rgba(127, 127, 127, .675); font-family: \"Open Sans\", \"Calibri Light\", Calibri, sans-serif; font-size: " + loaderScreenFontSize + "px !important; margin: 0 auto; margin-top: " + loaderScreenMargin + "px; text-align: center'> " + loaderScreenMessage + " </small>";

                // Style
                data.style = 'align-items: center; background-color: rgba(255, 255, 255, .98); display: flex; flex-direction: column; height: ' + innerHeight + 'px; justify-content: center; left: 0; margin: auto; max-height: 100% !important; max-width: 100% !important; min-height: 100vh; min-width: 100vh; position: fixed; top: 0; transition: ' + loaderScreenTransition + 's ease-in-out; width: ' + innerWidth + 'px; z-index: 2147483647';

            // Function
                // Alpha
                function alpha() {
                    // Clear Interval
                    clearInterval(metadata)
                };

                // Test
                function test() {
                    // Style > Data
                        // Background Color
                        data.style.backgroundColor = 'transparent';

                        // Opacity
                        data.style.opacity = 0;

                    // Set Timeout
                    setTimeout(function() {
                        // Deletion
                        data.remove();

                        // Modification > <body> > Style
                        document.body.style = document.body.getAttribute('style').replace('overflow: hidden !important;', '').replace('pointer-events: none !important;', '').replace('user-drag: none !important;', '').replace('user-select: none !important;', '');
                        (document.body.getAttribute('style') || '').trim() || document.body.removeAttribute('style')
                    }, ((+getComputedStyle(data).getPropertyValue('animation-delay').replace(/[a-zA-Z]/g, '').trim() + +getComputedStyle(data).getPropertyValue('animation-duration').replace(/[a-zA-Z]/g, '').trim() + +getComputedStyle(data).getPropertyValue('transition-delay').replace(/[a-zA-Z]/g, '').trim() + +getComputedStyle(data).getPropertyValue('transition-duration').replace(/[a-zA-Z]/g, '').trim()) * 1e3) + 100);
                }
        }, timeout())
    };

    /* Logic
            [if:else if:else statement]
    */
    if (condition())
        // Update
        update();

    else {
        // Initialization > Data
        var data = setInterval(function() {
            /* Logic
                    [if:else if:else statement]
            */
            if (condition()) {
                // Update > Processing Time
                processingTime += 1;

                // Update
                update();

                // Metadata
                metadata()
            }
        });

        // Function > Metadata
        function metadata() {
            // Clear Interval
            clearInterval(data);

            /* Logic
                    [if:else if:else statement]

                > Deletion
            */
            if ('data' in window && typeof data == 'undefined')
                delete window.data
        }
    }
})(window, window.document, window.undefined || void 0)

<html>
<div id="filter"></div>
<div id="load"></div>
<input type="button" value="Submit" onclick="myFunction()">
</html>
<style type="text/css">
*{
margin:0;
}
#load{
width:35px;
height:35px;
border-radius:50%;
border:2px solid #f3f3f3;
border-top:2px solid blue;
margin:auto;
right:0;
left:0;
top:40%;
position:fixed;
animation:load 1s linear infinite;
display:none;
}
@keyframes load{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
#filter{
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.5);
position:fixed;
display:none;
}
</style>
<script>
function myFunction(){
document.getElementById('filter').style.display="block";
document.getElementById('load').style.display="block";
window.location="location...";
}
</script>