Only run this function when the page load

Only run this function when the page load
0

#1

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 : http://www.enzo-ustariz.fr/

and here is the relative jquery snippet :

 $(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: !


#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


#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.


#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.


#8

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


#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.


#11

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

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

Just add https://cdn.jsdelivr.net/npm/[email protected]/src/js.cookie.min.js after your JQuery library.


#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.