The timing of the execution of the ready of function in jquery is compared to the load event of window

ready() of jquery implements DOMContentLoaded events, the difference between DOMContentLoaded and window load events

Simply put, ready() will be triggered when the document is loaded. At this time, resources such as images may not have been fully loaded. load will be triggered after all resources have been loaded

A look at the code for the ready function makes everything clear. The following code is annotated:

// Handle when the DOM is ready
    ready: function() {
        // Make sure that the DOM is not already loaded
        if ( !jQuery.isReady ) {
            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
            if ( !document.body ) {
                return setTimeout( jQuery.ready, 13 );
            }

            // Remember that the DOM is ready
            jQuery.isReady = true;

            // If there are functions bound, to execute
            if ( readyList ) {
                // Execute all of them
                var fn, i = 0;
                while ( (fn = readyList[ i++ ]) ) {
                    fn.call( document, jQuery );
                }

                // Reset the list of functions
                readyList = null;
            }

            // Trigger any bound ready events
            if ( jQuery.fn.triggerHandler ) {
                jQuery( document ).triggerHandler( "ready" );
            }
        }
    },

This is the end of this article, I hope you enjoy it.