Tengo una introducción de svg e img antes de pasar a la página principal. ¿Cómo muestro esta introducción solo una vez? aquí está mi código:
<div class="preload"> <div class="intro"> <img src="svg/toreriha_text_animated.svg"> <img class="bground" src="/img/background.png"> </div> </div> <script type="text/javascript"> setTimeout(function() { //After 9000 milliseconds, fade out the intro. The animation duration is 500 ms. $(".intro").fadeOut(500); }, 9000); </script>Si está dispuesto a mostrar la introducción solo cuando el usuario visita la página por primera vez, aquí hay una solución alternativa: agregue una clase hide a la introducción. Cuando se carga la página, busque un valor ( introLoaded en este caso) en localStorage . Si no está configurado, elimine la clase hide , muestre la introducción y configure el valor.
if (!localStorage.getItem("introLoaded")) { $(".intro").removeClass("hide"); localStorage.setItem("introLoaded", "true"); setTimeout(function() { $(".intro").fadeOut(500); }, 9000); } .intro.hide { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="preload"> <div class="intro hide"> <img src="svg/toreriha_text_animated.svg"> <img class="bground" src="/img/background.png"> </div> </div>