Home
Ecran de încărcare JavaScript în timpul încărcării paginii (Programare, Javascript, Jquery, Html, Css, Încărcare)

Ecran de încărcare JavaScript în timpul încărcării paginii (Programare, Javascript, Jquery, Html, Css, Încărcare)

aprilie 8, 2021 Programare
necunoscutA a intrebat.

Acest lucru este un pic cam greu de explicat, Așa că voi încerca să fac tot ce pot

Deci, în timp ce o pagină HTML se încarcă, aș vrea să apară un ecran de încărcare interesant. Când se termină de încărcat, vreau ca ecranul de încărcare să se șteargă și să fie afișat documentul HTML.

Practic, vreau ca acest lucru:

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>

să se întâmple în timp ce pagina se încarcă. când pagina se încarcă, Asta se șterge, iar restul documentului HTML este afișat. (Fac un sistem de credite și în timp ce creditele se încarcă am nevoie doar să spun că se încarcă, oamenii se plâng că nu pot da click pe nimic și trebuie să le spun tuturor că doar se încarcă)

Aș vrea să stau cât mai departe de Ajax deoarece aș vrea să învăț Javascript.

Comentarii

  • Ce-ar fi să încărcați mai întâi ecranul de „încărcare”? s-ar putea să încetinească un pic procesul de încărcare propriu-zis, dar ar ajuta semnificativ din punct de vedere psihologic –  > Por Renașterea.
  • @Rebirth Aș putea, Dar te referi la a avea o pagină cu ecranul de încărcare pe ea și apoi să redirecționezi către pagina reală după vreo 3 secunde? Aș putea face asta, dar chestia e că nu se încarcă cu adevărat, așa că arată puțin cam… copilăros. Chiar și cu asta, rulează acest lucru pe Jsfiddle, și nu cred că îți permite să faci mai multe pagini într-un singur proiect. O să încerc totuși copiind codul site-urilor pe calculatorul meu și să văd cum funcționează. –  > Por unknownA.
  • Aș zice că arătând ecranul de încărcare și solicitând pagina efectivă cu ajax (îmi pare rău, știu că ai vrut să stai departe de ajax). și afișând-o când a fost încărcată cu ajutorul comenzii success: opțiune. De asemenea, chiar dacă nu se încarcă cu adevărat, utilizatorii finali nu vor fi niciodată mai înțelepți, deoarece tehnologia i-a învățat pe mulți utilizatori că va exista un proces de încărcare sau de inițiere. –  > Por Renașterea.
  • @Rebirth Cred că va trebui să rezolv Ajax sau să fac chestia cu redirecționarea falsă până când apare ceva nou aici. Mulțumesc pentru că măcar ai încercat să ajuți totuși! –  > Por unknownA.
7 răspunsuri
Domnul Polywhirl

Puteți aștepta până când corpul este pregătit:

Aici este un JSFiddle care demonstrează această tehnică.

Comentarii

  • Puteți ajusta timpul de așteptare pentru intervalul de timp pentru a face ca încărcarea să fie mai rapidă sau mai lentă. –  > Por Dl Polywhirl.
  • Mulțumesc. Deși poate fi un pic cam falsă, pare cool și se va lipi de o singură pagină. Mulțumesc mult. Voi încerca și voi vedea dacă funcționează. –  > Por unknownA.
  • Verificat. Arată destul de bine! Din nou, vă mulțumesc pentru tot ajutorul pe care l-ați făcut. –  > Por unknownA.
  • @MarkieJonesWTF Dacă doriți să aflați mai multe despre unitățile de dimensionare, cum ar fi rem, , vh, , și vw atunci ar trebui să consultați A List Apart: Învățați să iubiți părțile plictisitoare din CSS. –  > Por Dl Polywhirl.
  • În vioara ta – cum se rotește ecranul de încărcare? Nu am găsit nici un keyframes, resurse suplimentare sau cod, care să facă acest lucru să se întâmple. Magie? 🙂 –  > Por Toastgeraet.
IronWilliamCash

La începutul scriptului de încărcare, faceți doar ca

vizibil prin css [display:block;] și faceți restul paginii invizibil prin css[display:none;].

După ce încărcarea este gata, doar faceți invizibilă încărcarea și pagina vizibilă din nou cu aceeași tehnică. Puteți folosi document.getElementById() pentru a selecta div-urile cărora doriți să le schimbați afișarea.

Edit: Iată cum ar arăta oarecum. Când corpul termină de încărcat, va apela funcția javascript care va schimba valorile de afișare ale diferitelor elemente. În mod implicit, stilul tău ar fi ca pagina să nu fie vizibilă la încărcare vizibilă. 

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

Comentarii

  • Acest lucru pare un pic confuz, deoarece sunt nou în Javascript. (Și nu am folosit niciodată Ajax înainte, așa că nu-mi spuneți să îl folosesc) Ați putea să îmi explicați puțin mai mult despre document.getElementById() și să îmi dați un exemplu, vă rog? –  > Por necunoscutA.
  • Hm. Ori de câte ori îmi încarc pagina, apare complet goală, ca și cum nu s-ar fi încărcat, dar Firefox spune că s-a încărcat. –  > Por unknownA.
Renașterea

Pentru a construi mai departe pe partea ajax pe care o puteți folosi sau nu (din comentarii)

o modalitate simplă de a încărca o altă pagină și de a o înlocui cu cea actuală este:

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

Vladimir Vladimirov

Dacă în site-ul dvs. aveți apeluri ajax care încarcă niște date, iar acesta este motivul pentru care pagina se încarcă lent, cea mai bună soluție pe care am găsit-o este cu 

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

https://jsfiddle.net/44t5a8zm/ – aici puteți adăuga câteva apeluri ajax și să testați.

Ihab Khattab

Aș sugera adăugarea clasei no-js în html pentru a vă anina selectorii CSS sub ea, de exemplu:

.loading {
    display: none;
 }

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

și când ați terminat de încărcat codul de credit să o eliminați:

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

Acest lucru va ascunde spinner-ul de încărcare, deoarece nu există nici un no-js clasa în html înseamnă că ați încărcat deja codul de credit

Comentarii

  • Îndepărtează stilul, dar nu îndepărtează <div> pentru rotiță. –  > Por unknownA.
  • De ce trebuie să eliminați <div>? este posibil să aveți nevoie să îl afișați din nou atunci când încărcați un alt cod de credit. în acest caz, veți adăuga doar no-js clasa în html $('html').addClass('no-js'); fără a fi nevoie să recreezi din nou <div> spinner –  > Por Ihab Khattab.
  • Dacă div-ul nu este eliminat, va arăta doar „Loading….” în partea de jos a creditelor, și nu vreau să se strice așa. –  > Por unknownA.
  • Sunteți sigur că eliminați no-js clasa din html și adăugați .loading { display: none; } la CSS? –  > Por Ihab Khattab.
Lapys

Această metodă utilizează clasa WindowOrWorkerGlobalScope.setInterval(https://developer.mozilla.org/en-US/doc) pentru a urmări stările de pregătire ale documentului & vedeți dacă <body> există.

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

Acest ecran de preîncărcare a fost realizat de Lapys @ https://github.com/LapysDev

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

Tags:, , , ,

Related Posts