Question

我正在开发直接在浏览器中打开的网站，但我希望它应该在循环旋转的gif图像之后打开并且我使用它但是gif图像连续旋转但是网站没有打开

我的代码是

<body class="home blog">
    <form id="form1" runat="server">
        <table class="doc-loader">
            <tr>
                <td>
                    <img src="ajax-document-loader.gif" alt="Loading..." />
                </td>
            </tr>
        </table>
    </form>
</body>

doc-loader的css代码为

.doc-loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;  
    }

.doc-loader td {   
     background-color: #1e1e1e;
     text-align: center;
     vertical-align: middle;
     }

Answer 1

您可以使用jquery并在页面加载完成后隐藏图像。

$(document).ready(function() {
   $('.doc-loader').hide();
});

Answer 2

让您的主页在更新进度下运行并使用以下代码。

<asp:UpdateProgress ID="UpdateProgress1" DisplayAfter="0" runat="server">
    <ProgressTemplate>
        <div id="div1" align="center" runat="server" class="page_loader" style="width: 100%;">
        </div>
        <div id="Progress">
            <img src="clock.gif" id="img1" runat="server" alt="Loading..." style="position: absolute;
                left: 45%; top: 40%; visibility: visible; height: 100px; z-index: 99999;" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Answer 3

试试这个，添加了一个youtube视频，以便花一些时间加载页面并且加载程序可见。

<form id="form1" runat="server">
    <table class="doc-loader">
        <tr>
            <td>
                <img src="http://sierrafire.cr.usgs.gov/images/loading.gif" alt="Loading..." />
            </td>
        </tr>
    </table>
    <h2>Other content</h2>
    <iframe width="560" height="315" src="//www.youtube.com/embed/rYXBbREtRB0" frameborder="0" allowfullscreen></iframe>
</form>

和一些jquery在页面加载时隐藏加载器

$(document).ready(function() {
   $('.doc-loader').hide();
});

演示：http://jsfiddle.net/4u8rZ/1/

我是如何在加载图标后打开网站的，这是gif图像

3 个答案: