Only run this function when the page load

Only run this function when the page load


Hi everyone !

I’m building this site for my first customer, and Iv’e aded an animation when the page load with the logo and a little gif,
the problem is that when i’m on a different page from the “accueil” page (home), and I want to go back on the “Accueil” page, the loading animation will run again…

Here is the site :

and here is the relative jquery snippet :

 $(window).on('load', function() {
        // Animate loader off screen

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


Could that perhaps work?

$(document).on('DOMContentLoaded', function() {

$(document).on('load', function() {

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


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


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.



Have you tried the one() jQuery method?


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


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.


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


Good stuff, it’s a very useful feature.


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.


You could add the JS Cookies library and put this inside your $(function(){

    if (Cookies.get('noPreloader') === 'true') {
    else  {
      $(window).on('load', function() {
          Cookies.set('noPreloader', 'true', {expires: 1}); // 1 day cookie
        // Animate loader off screen

Just add[email protected]/src/js.cookie.min.js after your JQuery library.


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.


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 :

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