How to Change jQuery to Fire On Page Load

Question

Okay, this seems like it should be simple, but I can't figure it out. I have this piece of code from another developer that I've been tasked with changing to fire on page load rather than scroll. I've tried changing everything I could think of (ex. changing .bind to .load and jQuery(this).bind('inview', function(event,visible) to $(document).ready(function() ), but nothing is working. What do I do to get these numbers to animate only on the initial page load?

    // Animate any number
    jQuery('.animateNumber').each(function(){

        var value = new Number;

        // Grab contents of element and turn it into a number
        value = jQuery(this).text();
        value = parseInt(value);

        // Set the starting text to 0
        jQuery(this).text('0');


        // Animate to correct value
        jQuery(this).bind('inview', function(event,visible) {
            if(visible == true) {
                jQuery(this).animateNumber(
                    {
                        number: value,

                    },
                    1000
                )
            }
        });

    });

UPDATE

I have changed the code to the following, and it is working fine in Firefox but it's not animating in Chrome. Anyone know why that would be?

// Animate any number
    jQuery('.animateNumber').each(function(){

        var value = new Number;

        // Grab contents of element and turn it into a number
        value = jQuery(this).text();
        value = parseInt(value);

        // Set the starting text to 0
        jQuery(this).text('0');


        // Animate to correct value

                jQuery(this).animateNumber(
                    {
                        number: value

                    },
                    1000
                );


                });

Answer 1

Just wrap it all in a document ready

$(document).ready(function() {
    //Your code
});

Edit: Looking at your code, looks like the:

jQuery(this).bind('inview', function(event,visible) {

will be fired every time that you make the element visible, so when you scroll down and back up, the function will run again... I would recommending removing that and the if statement right bellow it, making your code looks something like this:

// Animate any number
jQuery('.animateNumber').each(function(){

    var value = new Number;

    // Grab contents of element and turn it into a number
    value = jQuery(this).text();
    value = parseInt(value);

    // Set the starting text to 0
    jQuery(this).text('0');


    // Animate to correct value
            jQuery(this).animateNumber(
                {
                    number: value,

                },
                1000
            );

If it breaks something else, you also could create a global variable that will prevent it from executing more than one time:

var numbersAnimate = true;
// Animate any number
jQuery('.animateNumber').each(function(){

    var value = new Number;

    // Grab contents of element and turn it into a number
    value = jQuery(this).text();
    value = parseInt(value);

    // Set the starting text to 0
    jQuery(this).text('0');


    // Animate to correct value
    jQuery(this).bind('inview', function(event,visible) {
        if(visible == true && numbersAnimate == true) {
            numbersAnimate = false;
            jQuery(this).animateNumber(
                {
                    number: value,

                },
                1000
            )
        }
    });

Although, I would not recommend it... maybe as temporary fix at most