The Lazy Bubble: Show Loading Image while iframe loads

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <style type="text/css">
        #container, #container iframe
        {
            position: relative;
            width: 700px;
            height: 400px;
        }
        #loading
        {
            height: 75px;
            width: 150px;
            padding: 1px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -50px;
            display: none;
            border: 2px groove black;
            background-color: red;
            color: white;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.frames-links').click(function () {
                var frame1 = document.getElementById('frame1');
                var loadingDisplay = document.getElementById('loading').style;
                loadingDisplay.display = 'block';
                if (frame1.onload == null) {
                    frame1.onload = function () {
                        loadingDisplay.display = 'none'
                    };
                    if (window.attachEvent) {
                        frame1.attachEvent('onload', frame1.onload);
                    }
                }
                return true;
            });


        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <iframe id="frame1" name="frame1" src="about:blank" scrolling="auto" frameborder="1">
        </iframe>
        <div id="loading">
            Loading . . .
        </div>
    </div>
    <a class="frames-links" href="http://www.asp.net/" target="frame1">ASP.NET</a><br />
    <a class="frames-links" href="http://www.google.com/" target="frame1">Google</a>
    </form>
</body>
</html>
The Lazy Bubble

Pages

Tuesday, June 11, 2013

Show Loading Image while iframe loads

No comments:

Post a Comment

Followers
