Предварительная нагрузка изображения на угловое поведение маршрутизации js

Question

Я строю SPA с Angular и задаюсь вопросом, как обрабатываются изображения или большие файлы в целом по $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(), или, может быть, пропустите в шаблонеUrl и попросите его обработать изображения таким образом. В любом случае, надеюсь, это приведет вас в правильном направлении!

Answer 2

Ответ: Да. В приведенном выше коде используется базовая конфигурация маршрутизации AngularJs, и все определенные ресурсы в конфигурации маршрутизации загружаются сразу.

Однако, если вы хотели бы ленивой нагрузки эти ресурсы имеют вид на вариант Решимость конфигурации маршрутизации и requireJS (далее чтение только с целью)

Answer 3

Просто добавьте <img src="big-image.png" style="display:none" /> в home.html предварительно загрузить его.