run a jquery function onload and focus

Question

I have a function :

function skillbar() {
    $('.skillbar').each(function(){
        var percent = $(this).attr('data-percent');
        $(this).find('.skillbar-bar').delay(400).animate({width:percent},1500);
    });
}

I want this function to be executed when the page is loaded. so I run it like this :

$(window).load(function(){
    skillbar();
});

but I also want this function to be run only when browser tab is focused. I tried this:

$(window).load(function(){
    $(window).focus(function(){
        skillbar();
    });
});

The problem is that, when I use .focus(); when page is loaded, I have to switch browser tab once, and then it works. It means I have to focus on window onload, but what if someone is on another browser tab ?

demo http://jsfiddle.net/sem847un/1/

Answer 1

You need $(document).ready(function(){ This will initiate the function on load

$(document).ready(function(){
skillbar();
function skillbar() {
    $('.skillbar').each(function(){
        var percent = $(this).attr('data-percent');
        $(this).find('.skillbar-bar').delay(400).animate({width:percent},1500);
    });
}
});