Only run this function when the page load

JavaScript
1

Hi everyone !

I need to show a loader only for the first load, but not after the website has been cached.
Here is the code :

 $(window).on('load', function() {
        // Animate loader off screen
        $(".loader").show().delay(4000).fadeOut();
    });

I’m searching a way to delete it after the fisrt load or something else if you can help me :slight_smile: !

1 Like
2

Could that perhaps work?

$(document).on('DOMContentLoaded', function() {
  $(".loader").show()
});

$(document).on('load', function() {
  $(".loader").fadeOut();
});

Edit: I believe it should be a window instead of a document

1 Like
3

Thank’s for the reply, but it’s not working!
When I put “windows” it’s not working dnno why

4

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

5

Have you tried the one() jQuery method?

6

Yep i’ve tried the one() method, but it doesnt matter since when the page refresh the “one method” refresh too

7

Maybe use localStorage if you’re familiar with it to determine if the user has already visited the page and implement a way to remove your animation if the page has been visited.

1 Like
8

Yep i’m on it since 2hours :slight_smile: Kinda hard since i’m discovering that (storage)

1 Like
9

Good stuff, it’s a very useful feature.

10

This is what I was going to suggest, though you may want to use sessionStorage. The difference is that sessionStorage will be deleted when the user closes their browser tab. This way they’ll still see the animation when they go back to the homepage after being gone. If you use localStorage, you’ll have to figure out some way to delete your data from the browser (probably when the user logs out). Neither is necessarily better, but be aware of that difference.

12

Good point @PortableStick. localStorage is great for other uses but in this case you want them to see your animation again on another visit at a later time.

13

can you please provide the code you had originally used that gets the page loader working on each page (even though you didnt like the result)… Were you using a gif or a custom svg animation? In my case when I use a gif im able to get this feature working using this jquery function :
$(window).load(function(){
$(’.loader’).fadeOut();
});

But in the case of the animated svg which is in its own file, I was unable to reference the file and get it working. Can you please share your code of how you had originally set it up? and additionally the code after you fixed the problem you were having