在角度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路由行为上的图像预加载

回答

相关问题