JavaScript wird geladen, während die Seite geladen wird

Dies ist ein wenig schwer zu erklären, Also werde ich mein bestes versuchen,

So, während eine HTML-Seite geladen wird, möchte ich dort einen coolen laden Bildschirm Los ist. Wenn es fertig geladen ist, möchte ich den lade-Bildschirm zu löschen und das HTML-Dokument angezeigt werden.

Im Grunde, möchte ich Dieses:

CSS:

/* Absolute Center CSS Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

HTML:

<div class="loading">Loading&#8230;</div>

passiert zu sein, während die Seite geladen. wenn die Seite geladen wird, wird gelöscht, und der rest des HTML-Dokuments wird angezeigt. (Ich mache ein credits-system und während die credits laden, was ich gerade wirklich brauchen, es zu sagen, es ist das laden, die Leute Klagen, Sie können nicht auf alles und ich muss sagen Sie alle, es ist nur laden)

Möchte ich bleiben Sie Weg von Ajax so viel wie möglich, da ich möchte Javascript lernen.

InformationsquelleAutor der Frage unknownA | 2014-08-11

5

Am Anfang Ihres be-script, nur machen Sie Ihre

sichtbar durch css [display:block;] und stellen Sie den rest der Seite durch css unsichtbar[display:none;].

Sobald das laden fertig ist, machen nur die be-unsichtbar und die Seite wieder sichtbar mit der gleichen Technik. Sie können das Dokument.getElementById (), um die divs, die Sie möchten, um die Anzeige zu ändern.

Edit: Hier ist, was würde es irgendwie so Aussehen. Wenn der Körper finhishes laden, ruft die javascript-Funktion, die Anzeige zu ändern-Werte der verschiedenen Elemente. Standardmäßig ist Ihr Stil wäre, um die nicht sichtbaren Seite der Belastung sichtbar.
```
<head>
    <style>
        #page{
            diplay:none;
        }
        #laoding{
            display:block;
        }
    </style>
    <script>
        function myFunction()
        {
            document.getElementById("page").style.display = "block";
            document.getElementById("loading").style.diplay = "none";
        }
    </script>
</head>

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

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

    </div>
</body>
```
InformationsquelleAutor der Antwort IronWilliamCash

Bauen weiter auf den ajax-Teil, die Sie möglicherweise oder möglicherweise nicht verwenden (aus den Kommentaren)

eine einfache Möglichkeit zum laden einer anderen Seite, und ersetzen Sie es mit Ihre aktuelle ist:

<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>

InformationsquelleAutor der Antwort Rebirth

0

Ich würde vorschlagen, hinzufügen-Klasse no-js zu Ihrem html-Code zu verschachteln von CSS-Selektoren unter dem Motto:
```
.loading {
    display: none;
 }

.no-js .loading {
 display: block;
 //....
}
```
und wenn Sie fertig sind laden Sie Ihr Guthaben-code entfernen:
```
$('html').removeClass('no-js');
```
Dies wird verstecken Sie Ihre Ladesymbol da es keine no-js - Klasse in html-es bedeutet, dass Sie bereits geladen Ihre Kredit-code

InformationsquelleAutor der Antwort Ihab Khattab
0

Wenn Sie in Ihrer Website haben Sie ajax-Aufrufe laden einige Daten, und dies ist der Grund, die Seite lädt langsam, ist die beste Lösung, die ich fand, ist mit
```
$(document).ajaxStop(function(){
    alert("All AJAX requests completed");
});
```
https://jsfiddle.net/44t5a8zm/ - hier können Sie hinzufügen, einige ajax-Aufrufe und es testen.

InformationsquelleAutor der Antwort Vladimir Vladimirov

Diese Methode verwendet die WindowOrWorkerGlobalScope.setInterval(https://developer.mozilla.org/en-US/doc)
Methode zu verfolgen, die bereit Mitgliedstaaten des Dokuments & sehen, ob die <body> element vorhanden ist.

//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)

Diese pre-loading screen wurde von Lapys @ https://github.com/LapysDev

InformationsquelleAutor der Antwort Lapys

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.