Click here to Skip to main content
14,694,079 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi,

How can I implement this functionality using jquery(without using jquery ajax)

$("#events2").ajaxStart(function(){
$("#frameDiv").removeClass('frameDiv').addClass('frameDivLoading');
});
$("#events2").ajaxComplete(function(){
$("#frameDiv").removeClass('frameDivLoading').addClass('frameDiv');
});


i have a iframe on my page, on button click i am loading a page in iframe using iframe href attribute,
now at the time of loading i want to display loading image
Posted
Updated 17-Dec-10 3:07am
v5
Comments
Abdul Quader Mamun 17-Dec-10 5:42am
   
Spelling Check.
Sandeep Mewara 17-Dec-10 6:06am
   
Whats the issue?
niravsahayata 17-Dec-10 6:37am
   
i have a iframe on my page, on button click i am loading a page in iframe using iframe href attribute,
now at the time of loading i want to display loading image

1 solution

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);
    // I'm doing this only to get a noticable delay between
    // the click of the button and the load completion since
    // I'm doing this from my lokal disk
    window.setTimeout("SetIFrameSource()", 1000);
}
function SetIFrameSource()
{
    $("#subcontent").attr("src", "http://www.manfred-bihy.de");
}
</script>
</html>


Hope this still helps!

Regards,


Manfred
   
v4
Comments
Dalek Dave 27-Dec-10 18:32pm
   
Great Answer.
thatraja 28-Dec-10 11:48am
   
Good answer
Manfred Rudolf Bihy 28-Dec-10 12:32pm
   
Thanks, both of you!
Espen Harlinn 11-Jan-11 7:58am
   
5+ Well written answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900