Check this code:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery-2.1.3.js"></script> <script type="text/javascript" src="/index.js"></script> </head> <body> Here my web site will be loaded: <div id="myWebSite"></div> </body> </html>
JS:
window.onload=function () {
var contentURI = 'http://localhost/jasmineClock/file.html',
isLoadingStarted,
loadingTimeOutHandle;
isLoadingStarted = true;
setTimeout(function () {
$( "#myWebSite" ).html( $( "#myWebSite" ).html() + "<p>setTimeout</p>" );
isLoadingStarted = false;
}, 100);
$.get(contentURI, function (data) {
$( "#myWebSite" ).html( $( "#myWebSite" ).html() + data );
});
isLoadingStarted = false;
}
file.html which will be loaded:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var i = 0;
while (i < 1000000000) {
i++
}
</script>
</head>
<body>
I will be loaded.
</body>
</html>
If you execute this code, you will see that setTimeout will be executed AFTER ajax call is finished, delete javascript part from file.html, and maybe add some long lorem ipsum, just to slow down execution, and you will see that setTimeout will be executed beofre ajax call.
Here you can see example with javascript, and here you can see example with long lorem ipsum.