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


pg1 45

published 4 years ago

<!doctype html>

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

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


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

    <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" />


        //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 />');


Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).