각도 js 라우팅 동작에서 이미지 미리로드

Question

Angular으로 SPA를 구축하고 있으며 이미지 또는 대용량 파일이 $routeProvider을 통해 어떻게 처리되는지 궁금합니다.

.when('/', { 
    templateUrl : 'pages/home.html', 
    controller : 'mainController' 
}) 

.when('/contact', { 
    templateUrl : 'pages/contact.html', 
    controller : 'contactController' 
}); 

및 contact.html 내부

큰 이미지의로드가 있습니다 :이 경로를 보내고있어 경우 감안할 때. home.html에 이미 이러한 이미지가 있음을 알게되고 어떻게 든 다운로드하기 시작하거나이 작업을 수행하려면 JS 방법이 필요합니다.

감사

Answer 1

지금까지 내가 경로가 트리거 될 때까지 경로 템플릿이로드되지 않습니다 이해. 그리고 모든 해결 객체가 해결되면 트리거가 발생합니다

이미지를 미리로드하려면 경로 정의에 resolve 속성을 사용하는 것이 가장 좋은 해결책 일 것입니다. $routeProvider documentation here을 참조 할 수 있습니다.

기본적으로,이 같은 것을 할 것이다 다음 Preloader.preload()이 약속을 반환한다고 가정

.when('/contact', { 
    templateUrl : 'pages/contact.html', 
    controller : 'contactController', 
    resolve : 
    imageData: function(Preloader) { 
     return Preloader.preload(); 
    } 
}); 

를, 다음 경로는 이미지 만 완전한 사전로드됩니다 번.

프리 로더 서비스는로드 할 이미지를 알아야합니다. preload()을 호출 할 때 직접 전달하거나 templateUrl을 전달하여 이미지를 구문 분석 할 수 있습니다. 어쨌든, 잘하면 이것이 올바른 방향으로 시작됩니다!

Answer 2

대답은 예입니다. 위의 코드는 기본 AngularJs 라우팅 구성을 사용하고 라우팅 구성의 모든 정의 된 리소스가 즉시 다운로드됩니다. 당신이 게으른 부하 좋아하면

그러나, 이러한 자원을 미리로드

Answer 3

그냥 home.html을에 <img src="big-image.png" style="display:none" />를 추가 라우팅 구성 및 requireJS (더 읽기 목적으로 만 해당)의 해결 옵션을 살펴 있습니다.