Question

我正在尝试使用jQuery加载动画。我为css文件尝试了不同的路径，如

<link href="css/animation.css" type="text/css" rel="stylesheet">

<link href="../css/animation.css" type="text/css" rel="stylesheet">

但仍然没有在html文件中加载CSS文件。当我将CSS文件保存在与html文件相同的文件夹中时，它可以正常工作。

我的文件夹结构 ...

的index.html

 <html>
 <head>
 <title>Loading Animation using jQuery</title>
 <script src="js/jquery.js"></script>
 <script src="js/jquery.backstretch.js"></script>
 <link href="css/animation.css" type="text/css" rel="stylesheet">
 </head>
 <body>
 <div id="loader">
 </div>
 <h2>Hi There</h2>
  <script>

    $(window).load(function(){
        $("#loader").delay(10000).hide(0).fadeOut("slow");
    });
  </script>
 </body>
 </html>

animation.css

   #loader{
    z-index:999999;
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249); 
     }

正在正确加载js文件，但css文件不是..不明白我哪里出错..

Answer 1

加载CSS文件应该没有任何问题，

因为文件夹CSS与HTML文件位于同一目录级别。

但是CSS文件中使用的图像比CSS文件高一级。

尝试更改

background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

到

background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

Answer 2

在编辑器中打开您的项目，转到您的css文件所在的文件夹。将css文件拖放到代码中。它会自动为您生成路径。希望这会有所帮助。

Answer 3

打开开发人员工具，在网络选项卡中 - 选择CSS选项。应该看到如下图所示的内容。

在你的情况下，它应该是404，你可以复制浏览器请求的完整链接，然后调试和修复就会更容易。

Answer 4

我看到根据你的结构你的文件夹结构是你的外部CSS链接的右链接。

并检查animation.css在css文件夹中是否可用

Answer 5

如果您在Chrome浏览器中运行此应用程序。只需按clt + shift + j或F12即可查看错误。Like the attached image you can see the error on console tab, just fix that

Answer 6

您可以使用以下代码

来引用您的CSS文件

<link href="css/animation.css" type="text/css" rel="stylesheet">

但你必须修改你的CSS文件

background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

Answer 7

首先，您需要通过将网络选项卡检查为Yasser stated来确定是否实际未加载CSS文件。

如果未加载CSS，则需要检查CSS文件 animation.css实际存在于您的CSS文件夹中。
如果加载了CSS，那么请利用开发人员工具来了解正在应用的CSS。如果遇到麻烦，请分享一下。

外部CSS文件未加载到HTML文件中

7 个答案: