Q:

Does this function slow down page load time? How to optimize?

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?

A:

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.

