jQuery . Loading screen doesn't desappeare after 1 sec

Question

I'm using this code to make loading screen appears for 1 sec then disappears,but It's keep loading

CSS

.preloader {
    overflow: auto;
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fefefe;
}

JS

jQuery( window ).load(
    function() {
        jQuery( '.status' ).fadeOut();
        jQuery( '.preloader' ).delay( 1000 ).fadeOut( 'slow' );
        setTimeout( zerif_display_iframe_map, 500 );
    }
);

Answer 1

Use a default setTimeout from Javascript. In the documentation of jQuery.delay() it says:

The.delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

You also should check up on how to use the document.ready function , I had to clean this up to get it to work.

 $(function() { jQuery('.status').fadeOut(); setTimeout(function() { jQuery('.preloader').fadeOut('slow'); }, 1000); });

 .preloader { overflow: auto; position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="status"> I fade out </p> <div class="preloader"></div> <p> I'm blocked by a design from 1999, aka preloader </p>

Answer 2

You could generate the necessary containers and elements via javascript and remove them once the page has successfully loaded.

Furthermore, you don't even need jquery , you could do it in plain vanilla javascript and pure css, which would likely be faster, and smaller.

Instead of using an image we can generate an svg with javascript, for better overhaul performances.

I worked on something similar a while back, it will automatically generate all the necessary component to get the perfect loading screen. Place the following <script> near the end of your pages, right before the closing </body> tag

var t="#2774ab",u=document.querySelector("*"),s=document.createElement("style"),a=document.createElement("aside"),m="http://www.w3.org/2000/svg",g=document.createElementNS(m,"svg"),c=document.createElementNS(m,"circle");document.head.appendChild(s),(s.innerHTML="#sailor {background:"+t+";color:"+t+";display:flex;align-items:center;justify-content:center;position:fixed;top:0;height:100vh;width:100vw;z-index:2147483647}@keyframes swell{to{transform:rotate(360deg)}}#sailor svg{animation:.3s swell infinite linear}"),a.setAttribute("id","sailor"),document.body.prepend(a),g.setAttribute("height","50"),g.setAttribute("filter","brightness(175%)"),g.setAttribute("viewBox","0 0 100 100"),a.prepend(g),c.setAttribute("cx","50"),c.setAttribute("cy","50"),c.setAttribute("r","35"),c.setAttribute("fill","none"),c.setAttribute("stroke","currentColor"),c.setAttribute("stroke-dasharray","165 57"),c.setAttribute("stroke-width","10"),g.prepend(c),(u.style.pointerEvents="none"),(u.style.userSelect="none"),(u.style.cursor="wait"),window.addEventListener("load",function(){setTimeout(function(){(u.style.pointerEvents=""),(u.style.userSelect=""),(u.style.cursor="");a.remove()},100)})

You can check the latest version here https://github.com/amarinediary/Sailor with all it's documentation.