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。

基本上，你会做这样的事情：

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

假设Preloader.preload()返回一个承诺，那么只有在预先加载图像后，您的路线才会完成。

Preloader服务必须知道要加载的图像，您可以在调用preload()时直接传入，也可以传入templateUrl并让它解析图像。无论如何，希望这会让你朝着正确的方向前进！

Answer 2

答案是肯定的。上面的代码使用基本的AngularJs路由配置，并立即下载路由配置中的所有已定义资源。

但是，如果您想延迟加载这些资源，请查看路由配置和requireJS的解析选项（仅限进一步阅读目的）

Answer 3

只需将<img src="big-image.png" style="display:none" />添加到home.html即可预加载。

图像预加载角度js路由行为

3 个答案: