为什么我使用 css 时页面加载不出来？答案

【问题标题】：Why isn't my page loading when I use css?为什么我使用 css 时页面加载不出来？
【发布时间】：2016-09-11 15:03:11
【问题描述】：

我在这个网站上有我的页面：www.rootscope.in

当我使用 css 时，尤其是下面这个：

.loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(assets/img/icons/loader.svg) no-repeat center center #fe9d68;
    background-size: 60px;
}

HTML：

<div>
    <div id="content" class="container">
        <!--main content-->
        <div id="wrap">
            <div ui-view="content" id="content"></div>
        </div>
    </div>
</div>

角度路由：

angular.module('myApp').config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {

// For any unmatched url, redirect to /login
$urlRouterProvider.otherwise("home");

$stateProvider
.state('home', {
    url: "/home",
    views: {
        content: {
            templateUrl: 'views/home.html',
            controller: function ($scope) {
            }
        },
    }
});

本模板中使用的部分脚本：

<script src="assets/js/jquery.countdown.min.js"></script>
<script src="assets/js/jquery.easydropdown.min.js"></script>
<script src="assets/js/jquery.flexslider-min.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/jquery.viewportchecker.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>

我在脚本标签中有这一行：

$('.loader').fadeOut('slow'); // End Loader

页面一直显示加载 svg 图标动画。当我在 chrome 中检查页面并删除 .loader 类时，页面加载但缺少一些样式。我本可以检查错误，但我从一个站点购买了这个 html/css 模板，并对其应用了 Angular。我不明白.loader class 有什么问题

【问题讨论】：

显示更多代码，没有足够的信息我们可以提供帮助
@MehdiDehghani 所有代码都在网站上。您可以查看来源。
.loader 元素正在通过角度动态下载。当您向“End Loader”发出命令时，它仍然不存在。
@AndreFigueiredo 我没听懂你
恐怕你需要把相关代码放在这里。这就是 Stackoverflow 的工作方式。

标签： javascript jquery css angularjs

【解决方案1】：

一个常见的问题是在加载 DOM 之后，但在 AngularJS 运行脚本加载模板页面之前加载脚本。

您应该只在 Angular 之后隐藏“.loader”。最简单的解决方案（但不可扩展）就是把它放在角度控制器中：

function controller($scope){
   $('.loader').fadeOut('slow');
}

【讨论】：

【解决方案2】：

实际上在文档加载时找不到加载器元素，因为内容尚未加载。所以在这里使用 setTimeout 几秒钟然后它就可以完美地工作了。

$(document).ready(function(){
  setTimeout(function () {
    $('.loader').fadeOut('slow');
  }, 1000);
});

【讨论】：

这不是解决方案，因为加载时间可能超过1000