Friday, 4 April 2014

jquery event differences

document.ready event :

document.ready event will fire whenever DOm is loaded

window.load event :

window.load event will fire after loading all assets(images,Iframes etc) of webpage.


ex1:
 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
        //first DOM will load
            $('document').ready(function() {
                alert('DOM loaded');
            });
        //in this program, after image will load this event will fire.
            $(window).load(function() {
                alert("window loaded");
            });
        </script>
</head>
<body>
     <img src="http://www.all-wallpapers.net/wallpapers/2012/11/Dimensional-Images-1050x1680.jpg" />
</body>


ex2:

$(document).ready(function () {
    $(document.body).css('background-color', 'silver');
});

$(window).load(function () {
    alert('this will alert after all the window resources completly loaded');
    $(document.body).css("background-color", "green");
});

No comments:

Post a Comment