¿Alguien puede decirme por qué el div del precargador no desaparece después de que se carga la página y se especifica el tiempo agregado? Solía funcionar, ahora no funciona en un sitio nuevo... Creo que me olvidé de algo cuando lo usé en el sitio nuevo.
simplemente muestra el div y permanece en esa pantalla para siempre.
$('body').append('<div id="loading-container"><div id="loading-inner"><p id="percent">100</p><div id="bar"><div id="bar-percent"></div></div></div></div>'); $(window).on('load', function(){ setTimeout(removeLoader, 2750); //wait for page load PLUS x. }); function removeLoader(){ //fadeUp.play(); $( "#loading-container" ).fadeOut(250, function() { // fadeOut complete. Remove the loading div $( "#loading-container" ).remove(); //makes page more lightweight }); } /* LOADER */ #loading-container { position:fixed; top:0; left:0; display: flex; justify-content: flex-end; width:100%; height:100vh; background-color: #131313; z-index: 20; } #loading-inner { display: flex; align-self: center; flex-direction: row; } #percent { color: white; font-size: 30px; margin-right: 30px; font-family: canela } #bar { width: 200px; background-color: #424242; height: 1px; align-self: center; } #bar-percent { height: 1px; width: 1%; background-color: white; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Prueba con el siguiente código. Solo guardo la cadena html con el objeto jquery en la variable del cargador. y ahora no depende de la identificación.
var loader = $('<div id="loading-container"><div id="loading-inner"><p id="percent">100</p><div id="bar"><div id="bar-percent"></div></div></div></div>') $('body').append(loader); $(window).on('load', function(){ setTimeout(removeLoader, 2750); //wait for page load PLUS x. }); function removeLoader(){ //fadeUp.play(); loader.fadeOut(250, function() { // fadeOut complete. Remove the loading div loader.remove(); //makes page more lightweight }); }