Anonymous function on page load
<p>I'm trying to get better with JavaScript and learn how to utilize my code in functions and keep everything clean. I'm trying to run a function on page-load...</p>

<pre><code>var setColors = function(){
        this.init = function(){
            $.getJSON('js/colors.json', function(colors) {
                    $.each(colors, function(i, colors) {
                        $('&lt;li&gt;', {
                            text: colors['color'],
                            'name' : colors['color'],
                            'data-hex' : colors['hex'],
                            'data-var' : colors['var']
                        }).appendTo('#picker');
                    })
            });
        }
    }
</code></pre>

<p><em>(This is not a color-picker, just a list of colors)</em>
I want <code>setColors()</code> to be executed as soon as the page starts. I read that an anonymous function runs automatically, but this one isn't, I also tried...</p>

<pre><code>$(function(){
    setColors();
});
</code></pre>

<p>Below the <code>setColors()</code> function and that isn't working ether (The page is just blank). What am I doing wrong and how do I get my function to run on page load? I'm trying to learn so an explanation would be great.</p>
