载入画面示例答案

【问题标题】：Loading screen example载入画面示例
【发布时间】：2014-03-01 13:57:41
【问题描述】：

我的 HTML：

<html>
<head>
    <link rel="stylesheet" href="C:\Users\coeconsultant3\Desktop\Loadingexample\abccss.css">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(window).load(function () {

            $("#loader").fadeOut("slow");

        })
    </script>

</head>
<body>
    <div id="loader"></div>
    <div id="page1">
        <p>
            <h1>Hello World !!!
            </h1>
        </p>
    </div>
</body>
</html>

加载器的 CSS ：

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('C:/Users/coeconsultant3/Desktop/Loadingexample/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

我使用了不同行为的脚本：

当我使用divid = loader时，它直接显示hello world。

当我使用divclass = loader时，它只是显示正在加载的gif图像而不是通过页面。

我想知道这个程序的错误

【问题讨论】：

也许你可以提供一个小提琴。
什么样的小提琴？？
您希望 Hello World 文本像淡入一样显示？
@Yatin a fiddle from jsfiddle.net - 就像一个典型的网页编辑器，但可以保存并分享给其他人。用小提琴检查我的答案。希望能帮助到你！ =)
能否提供一个 loader 的 css ？

标签： html splash-screen loader

【解决方案1】：

这两种情况都有两个问题：

问题 1：当你申请 class="loader" 时：

这里的问题是，当您使用 class="loader" 您的 css 应用于 div。在javascript中，您使用的是 $("#loader") 而不是 $(".loader")

问题 2：应用 id="loader" 时：

这里的问题是您删除了 class="loader" 并添加了 id="loader" 这样您的 css 将不会应用于 div。

解决方案： 使用如下所述的类更新您的 div：

<div id="divloader" class="loader"></div>

如下所述更新您的 javascript：

<script type="text/javascript">
    $(window).load(function () {

        $("#divloader").fadeOut("slow");

    })
</script>

【讨论】：

【解决方案2】：

试试这个：

HTML：

<div id="dvLoading"></div>

CSS：

#dvLoading
{
   background:#000 url(images/loader.gif) no-repeat center center;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
}

脚本：

<script>
$(window).load(function(){
  $('#dvLoading').fadeOut(2000);
});
</script>

这是reference and demo。

【讨论】：

【解决方案3】：

您的代码运行良好。对于信息$(document).ready() 更好用。

您链接 CSS 的方式，我假设您直接打开 HTML 文件，即双击文件（如果我错了，请纠正我）。如果是这种情况，那么您必须更正您的 jQuery 链接：

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

【讨论】：

我希望这个程序扩展到网络服务命中请求和响应......我该怎么做我已经发布了一个类似的问题......但没有具体的答案
把问题的 URL 发给我。我会尝试解决这个问题
获取stackoverflow.com/questions/21570283/…我发布的问题

【解决方案4】：

这给出了您希望拥有的fadeIn 效果：

$(document).ready(function(){
            $('body').css('display', 'none');
            $("body").fadeIn("slow");

});

这是Fiddle。

希望这会有所帮助！

【讨论】：

你可以简单地使用$('body').css('display', 'none'); $("body").fadeIn("slow"); 而不是$('body').hide().fadeIn("slow");
我从没想过 .hide() 是为了让代码更简单更短，谢谢@Ashish Kumar！ =)

【解决方案5】：

而不是

$(window).load(function () {
 //your code
});

使用

$(document).ready(function(){ 
 //your code
});

【讨论】：

【解决方案6】：

问题：您在函数末尾缺少分号;

改成

 $(window).load(function () {

            $("#loader").fadeOut("slow");

        });

也添加这个

$(document).ready(function(){
    $("#page1").fadeIn(3000)
});

别忘了给style="display:none;" 给div page1

希望对您有所帮助..!!

【讨论】：