我有看起来像的图像<img ng-src="dynamically inserted url"/>
。加载单个图像时,我需要应用 iScroll refresh() 方法以使图像可滚动。
了解图像何时完全加载以运行回调的最佳方法是什么?
我有看起来像的图像<img ng-src="dynamically inserted url"/>
。加载单个图像时,我需要应用 iScroll refresh() 方法以使图像可滚动。
了解图像何时完全加载以运行回调的最佳方法是什么?
这是一个如何调用图像加载的示例http://jsfiddle.net/2CsfZ/2/
基本思想是创建一个指令并将其作为属性添加到 img 标签。
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:
<img ng-src="{{src}}" imageonload />
我对此进行了一些修改,以便$scope
可以调用自定义方法:
<img ng-src="{{src}}" imageonload="doThis()" />
指令:
.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);
});
}
};
})
希望有人觉得它非常有用。谢谢@mikach
该doThis()
函数将是一个 $scope 方法
@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');
});
}
};
});
我的答案:
var img = new Image();
var imgUrl = "path_to_image.jpg";
img.src = imgUrl;
img.onload = function () {
$scope.pic = img.src;
}
刚刚更新了之前的代码..
<img ng-src="{{urlImg}}" imageonload="myOnLoadImagenFunction">
和指令...
.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);
});
}
};
})
基本上这是我最终使用的解决方案。
$apply() 只能在适当的情况下由外部资源使用。
而不是使用应用,我将范围更新抛出到调用堆栈的末尾。与“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);
});
}
};
}]);