Display ajax loader During IFRAME Loading [jQuery]


<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo - IFRAME Loader</title>
<style>
#frameWrap {position:relative;height: 360px;width: 640px;border: 1px solid #777777;background:#f0f0f0;box-shadow:0px 0px 10px #777777;}
#iframe1 {height: 360px;width: 640px;margin:0;padding:0;border:0;}
#loader1 {position:absolute;left:40%;top:35%;border-radius:20px;padding:25px;border:1px solid #777777;background:#ffffff;box-shadow:0px 0px 10px #777777;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="frameWrap">
<img id="loader1" src="/demo/images/loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="/demo/1508-iframe-loading-source.aspx" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>
</html>