我正在尝试使用 AngularJS 显示图像并每分钟自动刷新一次。
问题是我抓取的图像来自一个 API,该 API 不允许我将任何虚假内容附加到 url 以使 url 每次都不同。所以,没有 ?_ts=12356678
等等......
我目前的代码是这样的:
HTML 模板:
<div data-ng-controller="UpdateController" data-ng-init="image_reloader(timer=2000, url='http://lorempixel.com/400/200/sports/')">
<img ng-src="{{ image_url }}"></img>
</div>
AngularJS Javascript:
var app = angular.module('app', []);
app.controller('UpdateController', function($scope, $timeout) {
$scope.image_reloader = function(timer, url) {
$scope.timer = timer || 10000;
$scope.updater = function() {
$scope.image_url = url + '?_ts=' + new Date().getTime();
$timeout($scope.updater, $scope.timer);
};
$scope.updater();
};
});
除了我不能使用的 ?_ts
部分之外,这种方法可以解决问题...将 scope.image_url
部分更改为 $ scope.image_url = url;
不执行任何操作,它也不会尝试刷新图像。
我如何强制 AngularJS 尝试刷新它?在将其更改为 url 之前,我还尝试将 $scope.image_url
设置为 ''
。
AngularJS 只是框架,任何 Javascript/jQuery 解决方案都可以,但我更喜欢与 AngularJS 相关的解决方案。
最佳答案
我向该 API 的 vendor 发送了一个添加虚拟参数的请求,以便这成为可能,但现在已经一个月了,没有回复。
我也一直在思考这个问题,终于找到了解决办法。它就像使用 # 符号而不是 ? 一样简单。哈希永远不会发送到服务器,但仍然足以让 JavaScript 将其视为不同的请求并因此重新获取图像。 有点尴尬之前没有想到这一点 :)
示例(使用我为这个项目所做的工作流,而不是 AngularJS 最佳
Angular 代码:
$scope.image_reloader = function(timer, url) {
$scope.timer = timer || 10000;
$scope.updater = function() {
$scope.image_url = url + '#' + new Date().getTime();
$timeout($scope.updater, $scope.timer);
};
$scope.updater();
};
HTML代码:
<div ng-controller="UpdateController" ng-init="image_reloader(timer=2000, url='http://lorempixel.com/400/200/sports/')">
<img ng-src="[[ image_url ]]"></img>
</div>
关于javascript - 在没有任何参数的情况下在javascript中重新加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17384907/