Question

Good morning,

I am currently finishing a project: http://schaedlingsbekaempfer24.eu/

After embeding a little bit of javascript for a simple self calling fadeOut/fadeIn effect, page load time increased by four to five seconds.

This is my js:

$(document).ready(function() {

    pic = $(this).find('.picture a:nth-child(2n) img');
    text = $(this).find('#testimonal p:first-child').next();

    $.fn.fader = function() {

        $(pic).delay(5000).fadeOut(300);
        $(text).delay(5000).fadeOut(300);

        $(pic).delay(5000).fadeIn(300);
        $(text).delay(5000).fadeIn(300);

        $(this).fader();
    };

    setTimeout(function() {    
      $('#preview').fader();
    }, 2000);

});

It seems like the function is executed from the very first moment the site is starting to load. How can I tweak my code for better loading performance?

Answer 1

Best fix is to move the set timeout inside the function, this way you avoid the recursion hammering and you spawn a fade call only once every 5 secs.

Right now you are akilling your browser forcing it in an endless recursion call.

If put a console.log(‘called’) inside your fader function you will be surprised!

There are also minor improvements you can do but they are really really minor compared to your first problem:

1- move $.fn.fader definition after jquery load and before the document ready callback function

2- cache your selectors eg.

var $this = $(this);
$this.delay(1000).fadeIn(300);
$this.delay(1000).fadeOut(300);

Again, this are very minor performances tweaks compared to your big optimization issue and are not going to give decent performance in itself.