当我使用css时，为什么我的页面无法加载?

Why isn't my page loading when I use css?

本文关键字：加载 我的 为什么 css      更新时间：2023-09-26

我有我的网页在这个网站: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>

在script标签中有这一行:

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

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

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

你应该只隐藏"。加载器"。最简单的解决方案(但不可扩展)就是把它放在angular控制器中:

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

实际上在文档加载中没有找到loader元素，因为内容还没有加载。所以在这里使用setTimeout几秒钟然后它就能正常工作了

$(document).ready(function(){
  setTimeout(function () {
    $('.loader').fadeOut('slow');
  }, 1000);
});
相关文章：