javascript ng-src：在加载图像之前显示一个 throbber
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17448854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-src: show a throbber before an image is loaded
提问by mingos
I have implemented an interface where the user can cycle through a set of images by clicking buttons. The image URLs are stored in an array and are replaced by angular.js dynamically:
我已经实现了一个界面，用户可以通过单击按钮在一组图像中循环。图像 URL 存储在一个数组中，并由 angular.js 动态替换：
<img ng-src="{currentUrl}">
However, the requests for consecutive images tend to lag a bit and the image change isn't apparent since the previous image is displayed until the new one arrives.
但是，对连续图像的请求往往会滞后一点，并且图像变化并不明显，因为在新图像到达之前会显示前一图像。
I would like to replace the image with a throbber (animated gif). How can I achieve that using Angular.js?
我想用 throbber（动画 gif）替换图像。我如何使用 Angular.js 实现这一目标？
回答by Jason Als
you can do this with a directive which replaces your image with a spinner whenever the path changes and shows the image when it is loaded.
您可以使用指令来执行此操作，该指令在路径更改时用微调器替换您的图像并在加载时显示图像。
<img my-src="{{currentUrl}}">
app.directive("mySrc", function() {
return {
link: function(scope, element, attrs) {
var img, loadImage;
img = null;
loadImage = function() {
element[0].src = "pathToSpinner";
img = new Image();
img.src = attrs.mySrc;
img.onload = function() {
element[0].src = attrs.mySrc;
};
};
scope.$watch((function() {
return attrs.mySrc;
}), function(newVal, oldVal) {
if (oldVal !== newVal) {
loadImage();
}
});
}
};
});
回答by Furqan Ahmed
I know its pretty late but i do it like
我知道它很晚了，但我喜欢这样做
<img src="img/loader.gif" ng-src={{dynamicImageURL}}>
by default your loader img will show and later when dynamicImageURL gets resolved, the image will be replaced by angular.
默认情况下，您的加载程序 img 将显示，稍后当 dynamicImageURL 得到解析时，图像将被 angular 替换。
回答by sparkalow
You could do this with CSS. Set the background of the img tag to the animated gif. The background will show until the image is loaded.
你可以用 CSS 做到这一点。将 img 标签的背景设置为动画 gif。背景将一直显示，直到图像加载完毕。
img{
background-image: url('throbber.gif') no-repeat;
}
回答by leon
Use a directive, the directive below only works for a single image but you'll want to use attr.$watchto detect changes to the imageIndex or src attribute of the element.
使用指令，下面的指令仅适用于单个图像，但您需要attr.$watch用于检测元素的 imageIndex 或 src 属性的更改。
myModule.directive('imgLoader', function() {
return {
restrict: 'A',
link: function(scope, element, attrs, controllers) {
// get the parent and chuck bg image in
var parent = element.parent();
parent.css('background-image', 'url("path-to-throbber.gif")');
parent.css('background-repeat', 'no-repeat');
// when it loads, hide the bg
element.load(function() {
parent.css('background-image','');
parent.css('background-repeat','');
});
}
}
});
You could always not use the ng-srcattribute, but have another attribute to watch, and then simply set the "src" attribute when the source image changes.
您可以始终不使用该ng-src属性，而是使用另一个属性来观察，然后在源图像更改时简单地设置“src”属性。
Hope this helps
希望这可以帮助
