在角度js路由行爲上的圖像預加載

我正在構建一個SPA，Angular並想知道如何通過$routeProvider來處理一般的圖像或大文件。既然我有這個路線的情況下：在角度js路由行爲上的圖像預加載

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

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

和內部contact.html有大的圖像加載。 home.html是否已經注意到這些圖像，並開始以某種方式下載它們，或者我需要一種JS的方式來執行此操作。

謝謝

來源

2014-09-30 supersize

據我所知，路由模板直到路由被觸發才加載。當解決所有的解析對象時，觸發將發生

如果您要預載圖像，那麼在路徑定義中使用resolve屬性可能是最佳解決方案。您可以參考$routeProvider documentation here。

從本質上講，你會做這樣的事情：

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

假設Preloader.preload()返回一個承諾，那麼你的路由只完成一次圖像預裝。

預加載程序服務必須知道要加載的圖像，您可以在調用preload()時直接傳入圖像，或者傳入templateUrl並將其解析出來。無論如何，希望這會讓你走向正確的方向！

來源

2014-09-30 16:24:02 hamstu

是對的，你必須在加載模板之前知道每個圖像的url – Endless 2014-09-30 16:34:01

答案是肯定的。以上代碼使用基本的AngularJs路由配置，並且路由配置中的所有已定義資源都會立即下載。

不過，如果你想延遲加載這些資源看看的路由配置和requireJS（僅在進一步閱讀的目的）resolve選項

來源

2014-09-30 16:26:47 skewl84

-1

只需添加<img src="big-image.png" style="display:none" />到home.html的預先加載它。

來源

2014-09-30 21:42:35 allenhwkim

在角度js路由行爲上的圖像預加載

回答

相關問題