I have svg and img introduction before proceed to the main page. how I show this introduction only once? here is my code:
<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>
If you are willing to show the intro only when the user visits the page for the first time, here is a workaround: add a hide class to the intro. When the page loads, check for a value (introLoaded in this case) in localStorage. If it is not set, remove the hide class, show the intro and set the value.
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>