[英]Angularjs resources keeps loading when changing page
好的,我有一个漂亮的“ Hardcore”应用程序内容和资源,可以使人们上传多个视频,图像文档等。
现在,在chrome中查看我的网络标签,我看到了一些令人不安的地方:
第1页有一个视频,用户可以转到第1页,然后单击视频上的播放
然后,用户决定他要更改页面,因此他转到页面2。
当用户在第2页上时,上一页中的视频仍会出现块状,表示仍在加载中。 因此,如果您继续这种模式的时间足够长,视频将开始停顿。
我想我不是第一个遇到这个问题的人,希望你们中的一些人有办法解决这个问题。
这是我加载视频的方式:
<video id="player1" src="http://mydomain/folder/video.mp4" controls="controls" width="598" height="320">
</video>
您可以编写一个在视频元素上执行此操作的指令;
angular.module('myApp').directive('stopLoadOnChange', ['$rootScope', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$rootScope.$on('$viewContentLoaded', function() {
element.get(0).suspend();
});
}
}
}]);
并像这样使用它:
<video stop-load-on-change id="player1" src="http://mydomain/folder/video.mp4" controls="controls" width="598" height="320">
</video>
我遇到了同样的问题,并尝试了yeouuu的指令,但是我用element[0]
替换了element.get(0)
。 另外,将视频的src
属性设置为''
,然后强制对其进行加载,这对我来说很有效,并停止了将视频先前设置在src属性中的操作从完成加载到加载。 因此,这是我对yeouuu指令的修改版本:
angular.module('app').directive('stopLoadOnChange', ['$rootScope',
function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$rootScope.$on('$viewContentLoaded', function() {
//this stops the video from loading
element[0].setAttribute('src', '');
try {
if (element[0].tagName.toLowerCase() === 'video') {
//for good measure
element[0].load();
}
} catch (err) {
}
//ah why not?
element[0].remove();
});
}
};
}
]);
我将指令附加到<video>
和<source>
标签上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.