How to use document ready equivalent without jQuery

0 votes
I have a script that uses $(document).ready, but it doesn't use anything else from jQuery. I'd like to lighten it up by removing the jQuery dependency.

How can I implement my own $(document).ready functionality without using jQuery? I know that using window.onload will not be the same, as window.onload fires after all images, frames, etc. have been loaded.
Sep 10, 2020 in JQuery by kartik
• 37,510 points
1,157 views

1 answer to this question.

0 votes

Hello @kartik,

Using DOMContentLoaded that is supported by over any browsers

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

jQuery's native function is much more complicated than just window.onload, as depicted below.

function bindReady(){
    if ( readyBound ) return;
    readyBound = true;

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });

        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top ) (function(){
            if ( jQuery.isReady ) return;

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch( error ) {
                setTimeout( arguments.callee, 0 );
                return;
            }

            // and execute any waiting functions
            jQuery.ready();
        })();
    }

    // A fallback to window.onload, that will always work
    jQuery.event.add( window, "load", jQuery.ready );
}

Hope it helps!!

Thank You!!

answered Sep 10, 2020 by Niroj
• 82,880 points

Related Questions In JQuery

0 votes
1 answer
0 votes
1 answer

jQuery.inArray(), how to use it right?

The jQuery inArray() method is used to find ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,670 points
322 views
0 votes
1 answer

jQuery $( function() {} ) and $(document).ready the same?

So technically they are both the same. Not ...READ MORE

answered Jun 13, 2022 in JQuery by rajatha
• 7,640 points
486 views
0 votes
1 answer

jquery function val() is not equivalent to "$(this).value="?

val() method is primarily used to get the ...READ MORE

answered Jun 14, 2022 in JQuery by rajatha
• 7,640 points
2,118 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
21,750 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
2,647 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
2,504 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
41,371 views
0 votes
1 answer

How can I implement my own $(document).ready functionality without using jQuery?

Hello @kartik,  There are three options: If script is the last ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
1,300 views
0 votes
1 answer

How to make $.post() use contentType=application/json in jquery?

Hii, Try this: $.ajax({ url:url, type:"POST", ...READ MORE

answered Nov 24, 2020 in JQuery by Niroj
• 82,880 points
9,710 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP