The following example shows how to setup an event hander that fires when the iframe has loaded the document. When the loading is initiated a picture is shown instead of the iframe. You can test it locally if want to. I placed mine in C:\temp and have jquery.js in C:\temp\scripts.
Please add a comment if you have any issues!
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<style type="text/css">
div#LoadingPic {
background : url(../images/Loading.jpg);
background-repeat: no-repeat;
background-position: center;
display: none;
width: 1000px;
height: 400px;
}
</style>
</head>
<body>
<div id="removed" style="width:1000px; height:400px; border: solid 5px green">
<div id="LoadingPic">
</div>
<iframe src="" id="subcontent" style="display: none; width: 1000px; height: 400px;">
</iframe>
</div>
<input id="DoIt" type="button" value="Do the magic!" style="height: 30px; width: 1010px;"/>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("input#DoIt").click(LoadIFrame);
}
);
function ShowIFrame(event)
{
$("div#LoadingPic").css("display", "none");
$("iframe#subcontent").css("display", "block");
$("input#DoIt").attr("disabled" , false);
}
function LoadIFrame(event)
{
var iFrame;
$("input#DoIt").attr("disabled" , true);
(iFrame = $("iframe#subcontent")).css("display", "none");
$("#LoadingPic").css("display", "block");
iFrame.load(ShowIFrame);
window.setTimeout("SetIFrameSource()", 1000);
}
function SetIFrameSource()
{
$("#subcontent").attr("src", "http://www.manfred-bihy.de");
}
</script>
</html>
Hope this still helps!
Regards,
Manfred
Submit an article or tip