Speed up development with full-stack environments for every branch.

Learn More

How jQuery onload works [DOM]

Forked from How to use the jQuery UI Slider.

1220 Runs 10149 Views 2319 Copies
Saved

Saved

pg1 45

pg1
published 4 years ago

<!doctype html>
<html>
<head>

    <title>How jQuery onload works</title>
    
    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        #log, #log2{
            font-size: 20px;
            line-height: 30px;
        }

    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <script>
        //get timestamp in millisecond
        var start = $.now();
    </script>

</head>
<body>
    <div id="log">Loading page ...</div>
    <div id="log2">Loading content ...</div>

    <img width="300" src="http://upload.wikimedia.org/wikipedia/commons/2/2b/NASA_AS-11-40-5875.jpg" alt="Moon Image" />

    <script>

        //this event is fired when all html element is loaded. 
        //we can start manipulating the DOM
        $(document).ready(function() {
            $('#log').html('DOM is ready. Load time: ' + ($.now()-start) + ' ms <br />');
        });

        //images and other content are starting to download after DOM is ready
        //this event is fired when all content is loaded
        $(window).load(function() {
            $('#log2').html('Page loaded. Load time: ' + ($.now()-start) + ' ms <br />');
        });
       

    </script>

</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).