加载DIV之前显示微调框图像

Question

我已经尝试解决这个问题，但是却一无所获。 基本上，我希望我的自定义微调器加载器图像首先出现几秒钟，然后消失，然后id = home的Div应该随其所有内容一起淡入。

我尝试了几种方法，但未达到预期的结果。 如果有任何有用的链接会有所帮助，请发布链接。

我的HTML页面：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" type="text/css" href="css/mystyles.css"/>
    <link rel="stylesheet" href="css/mytheme.min.css" />
    <link rel="stylesheet" href="css/structure-1.3.2.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="js/myscript.js"></script>

</head>
<body>
<div class="css-loader-icon"><img src="css/images/loader.gif"/></div>
<!-- Page: home -->
<div id="home" data-role="page" data-position="fixed" data-theme="a" data-title="My first app">
    <div data-role="navbar" data-mini="true">
        <ul>
            <li><a href="#home" class="css-hnav" >Home</a></li>
            <li><a href="#home" class="css-hnav" >Contact</a></li>
        </ul>
    </div><!-- navbar -->
    <div data-role="content" class="css-listview">
        <ul class="css-ul-list">
            <a href="#blog" data-role="button" data-mini="true">My Blogs</a>
            <a href="#tweets" data-role="button" data-mini="true">Tweet with me</a>
        </ul>
    </div>
</div><!-- page -->

JS：

$(function() {
    $(".css-loader-icon").fadeOut(2000, function() {
        $("#home").fadeIn(1000);        
    });
});

CSS：

.css-loader-icon {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
}

#content {display:none;}

Answer 1

好吧，尝试显示加载程序图标，而不是将其隐藏在CSS中并隐藏#home div。

~~显示：无；~~

#home{ display:none;}

然后，您的js将在2秒钟后隐藏loader gif并显示#home div。 由于gif已经隐藏，您将无法感受到效果。

加载DIV之前显示微调框图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-11-17 22:32:38

加载DIV之前显示微调框图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-11-17 22:32:38

解决方案1
0 已采纳 2013-11-17 22:32:38