이 사이트에 내 페이지가 있습니다 : 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 아이콘 애니메이션이 계속 표시됩니다. 크롬에서 페이지를 검사하고 .loader클래스를 제거 하면 페이지가로드되지만 일부 스타일이 누락됩니다. 오류를 확인할 수 있었지만 사이트에서이 html / css 템플릿을 구입하여 각도를 적용했습니다. 나는 무엇이 문제인지 이해하지 못한다.loader class
일반적인 문제는 DOM이로드 된 후 AngularJS가 템플릿 페이지를로드하는 스크립트를 실행하기 전에 스크립트를로드하는 것입니다.
Angular 뒤에 ".loader"만 숨겨야합니다. 가장 간단한 솔루션 (확장 불가능)은 각도 컨트롤러에 넣는 것입니다.
function controller($scope){
$('.loader').fadeOut('slow');
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다