Question

我想弄清楚为什么我的装载器微调器没有显示。

这是我的CSS代码：

 .loader {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url(./img/page-loader1.gif) 50% 50% no-repeat rgb(255,255,255);
   filter: alpha(opacity=70);
   -moz-opacity:0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 }

在我的名为edit.php的文件中，我有一个数据表需要大约3-5秒才能加载。我只想在装载时显示一个微调器。

在我的HEAD标签中，我调用我的css文件和我的javascript文件：

 <head>
   <link href="css/bootstrap.css" rel="stylesheet" />
   <script type="text/javascript" src="js/jquery-1.10.2.js"></script>

同样在HEAD中，我有javascript函数淡化了加载微调器：

 <script type="text/javascript">
    $(window).load(function() {
    $(".loader").fadeOut("slow");
    });
 </script>

然后，在开头的BODY标签下面，我有一个调用loader类的DIV：

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

名为page-loader1.gif的loader gif位于名为img。

的目录中

在css文件中，我试图遍历目录，看看是不是这个问题：

 background: url(./img/page-loader1.gif) 50% 50% no-repeat rgb(255,255,255);
 background: url(../img/page-loader1.gif) 50% 50% no-repeat rgb(255,255,255);
 background: url(img/page-loader1.gif) 50% 50% no-repeat rgb(255,255,255);

这些方法似乎都不起作用。

我尝试在DIV标签中添加单词TEST以查看会发生什么，有趣的是，当页面加载时，单词TEST确实出现，然后在页面加载完成时淡出。

这告诉我javascript正在做它应该做的事情。但我似乎无法使用DIV标签来显示page-loader1.gif。

你能看出我的错误吗？

请帮忙。

CSS3 Loader Spinner没有显示

0 个答案: