[JavaScript] jQuery document ready

Published on 2020-01-06 • Modified on 2020-01-06

This is a classic JavaScript snippet we all used at least once! There are several ways to achieve this, but I think the following code is the most readable. For those who don't know, some explanations. The code contained in this block will only be run when the page DOM (Document Object Model) has been loaded correctly (all content may not have been loaded yet, likes images). Check out the Stackoverflow link to have additional information. You can open your JavaScript console to verify that the debug message is displayed. Note that even the first syntax is more readable, the recommended one is the last as all others are now deprecated.


<script>
    $(document).ready(function() {
        console.log('DOM is ready!');
        // Open your JavaScript console, this message has been displayed.
    });

    $(function() {
        console.log('Recommanded syntax for jQuery3');
    });

    // That's it! 😁
</script>