jquery executes before html loaded : How to make the html loaded before javascript function 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(document).ready(function()
    {
         
              var x =10;
    	if(x==10)
    		{
    			
    				$('h1').text("Its changed !");
    			    alert("Test");

    		}
              
              
     })


<!-- language: lang-html -->

    <h1>Hello</h1>

<!-- end snippet -->

Here the alert message will appear then  <h1> changes 


I tried  also 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(function(){

    window.on('load',function(){
    //code
    })

    })

<!-- end snippet -->

but it  doesn't work .