Html AngularJS 中 ng-src 的图像加载事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17884399/
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
Image loaded event in for ng-src in AngularJS
提问by Sergei Basharov
I have images looking like <img ng-src="dynamically inserted url"/>. When a single image is loaded, I need to apply iScroll refresh() method so that to make image scrollable.
我有图像看起来像<img ng-src="dynamically inserted url"/>。当加载单个图像时，我需要应用 iScroll refresh() 方法以使图像可滚动。
What is the best way to know when an image is fully loaded to run some callback?
了解图像何时完全加载以运行某些回调的最佳方法是什么？
回答by mikach
Here is an example how to call image onload http://jsfiddle.net/2CsfZ/2/
这是一个如何调用图像加载的示例http://jsfiddle.net/2CsfZ/2/
Basic idea is create a directive and add it as attribute to img tag.
基本思想是创建一个指令并将其作为属性添加到 img 标签。
JS:
JS：
app.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
alert('image is loaded');
});
element.bind('error', function(){
alert('image could not be loaded');
});
}
};
});
HTML:
HTML：
<img ng-src="{{src}}" imageonload />
回答by Peter
I modified this a little so that custom $scopemethods can be called:
我稍微修改了一下，以便$scope可以调用自定义方法：
<img ng-src="{{src}}" imageonload="doThis()" />
The directive:
该指令：
.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
//call the function that was passed
scope.$apply(attrs.imageonload);
});
}
};
})
Hope someone finds it VERY useful. Thanks @mikach
希望有人发现它非常有用。谢谢@mikach
The doThis()function would then be a $scope method
该doThis()函数将是一个 $scope 方法
回答by Kailash
@ Oleg Tikhonov: Just updated the previous code.. @ mikach Thanks..)
@ Oleg Tikhonov：刚刚更新了之前的代码.. @ mikach 谢谢..)
app.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
alert('image is loaded');
});
element.bind('error', function(){
alert('image could not be loaded');
});
}
};
});
回答by Ramiro Spain
Just updated the previous code..
刚刚更新了之前的代码..
<img ng-src="{{urlImg}}" imageonload="myOnLoadImagenFunction">
and directive...
和指令...
.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
scope.$apply(attrs.imageonload)(true);
});
element.bind('error', function(){
scope.$apply(attrs.imageonload)(false);
});
}
};
})
回答by Rodrigo Andrade
My answer:
我的答案：
var img = new Image();
var imgUrl = "path_to_image.jpg";
img.src = imgUrl;
img.onload = function () {
$scope.pic = img.src;
}
回答by Doug
Basically this is the solution I ended up using.
基本上这是我最终使用的解决方案。
$apply() should only be used by external sources in the right circumstances.
$apply() 应该只在正确的情况下由外部来源使用。
rather then using apply, I've thrown the scope updating to end of the call stack. Works as good as "scope.$apply(attrs.imageonload)(true);".
而不是使用应用，我将范围更新抛出到调用堆栈的末尾。与“scope.$apply(attrs.imageonload)(true);”一样有效。
window.app.directive("onImageload", ["$timeout", function($timeout) {
function timeOut(value, scope) {
$timeout(function() {
scope.imageLoaded = value;
});
}
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
timeOut(true, scope);
}).bind('error', function() {
timeOut(false, scope);
});
}
};
}]);
