Mi precargador desaparece antes de que el contenido esté completamente cargado, así que técnicamente es inútil. ¿Cómo puedo arreglarlo también que he probado varios enfoques sin éxito? Además, el gif es increíblemente enorme; ¿Cómo puedo regular y reducir el tamaño del gif? Muchas gracias por toda su ayuda.
#loader{ position: fixed; width: 100%; height: 100vh; background: #ffffff url('https://media.giphy.com/media/xTkcEQACH24SMPxIQg/giphy.gif') no-repeat center; z-index: 999; } <!DOCTYPE html> <html lang="en"> <head> <link rel="shortcut icon" href="./images/favicon.ico" type="image/vnd.microsoft.icon" /> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Favicon icon --> </head> <body> <!-- Preloader --> <div id="loader"></div> <div id="content"> <img src="https://images.pexels.com/photos/3791466/pexels-photo-3791466.jpeg"></img> <img src="https://images.pexels.com/photos/3791466/pexels-photo-3791466.jpeg"></img> <img src="https://images.pexels.com/photos/3791466/pexels-photo-3791466.jpeg"></img> <img src="https://images.pexels.com/photos/3791466/pexels-photo-3791466.jpeg"></img> </div> </div> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="./js/script.js"></script> <script>var loader;function loadNow(e){e<=0?displayContent():(loader.style.opacity=e,window.setTimeout(function(){loadNow(e-.05)},100))}function displayContent(){loader.style.display="none",document.getElementById("content").style.display="block"}document.addEventListener("DOMContentLoaded",function(){loader=document.getElementById("loader"),loadNow(1)});</script> #loader{ position: fixed; width: 100%; height: 100vh; background: #ffffff url('https://media.giphy.com/media/xTkcEQACH24SMPxIQg/giphy.gif') no-repeat center; z-index: 999; } <!DOCTYPE html> <html lang="en"> <head> <link rel="shortcut icon" href="./images/favicon.ico" type="image/vnd.microsoft.icon" /> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Favicon icon --> </head> <body> <!-- Preloader --> <div id="loader"></div> <div id="content"> <img src="https://images.pexels.com/photos/3791466/pexels-photo-3791466.jpeg"></img> <img src="https://images.pexels.com/photos/3791466/pexels-photo-3791466.jpeg"></img> <img src="https://images.pexels.com/photos/3791466/pexels-photo-3791466.jpeg"></img> <img src="https://images.pexels.com/photos/3791466/pexels-photo-3791466.jpeg"></img> </div> </div> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="./js/script.js"></script> <script>var loader;function loadNow(e){e<=0?displayContent():(loader.style.opacity=e,window.setTimeout(function(){loadNow(e-.05)},100))}function displayContent(){loader.style.display="none",document.getElementById("content").style.display="block"}window.addEventListener("load",function(){loader=document.getElementById("loader"),loadNow(1)});</script> TLDR; Se cambió document.addEventListener("DOMContentLoaded" a window.addEventListener("load" debido a su diferente comportamiento