SO中有很多关于我们如何使用 Angular 指令来知道何时加载图像的示例。这些示例描述了一个直接应用于 img 元素的指令,如下所示:
<img ng-src="myimage.jpg" my-great-directive />
然后在指令“my-great-directive”中
我们可以做一个:
element.bind("load" , function(e){ }
我工作得很好。
但是,如果构造是这样的:
<div my-great-directive>
<img ng-src="myimage.jpg" />
</div>
在 my-great-directive 中,如何绑定(bind)到内部图像加载事件?
这对我来说并不是一个真正的理论问题。我正在使用一个名为 angular-carousel-slider 的第 3 方 slider ,它像这样环绕:
<ul rn-carousel rn-carousel-buffered
rn-carousel-index="mycarousel.index"
rn-carousel-auto-slide="0.3" rn-carousel-pause-on-hover >
<li ng-repeat="slide in slides">
<img ng-src="{{eventBasePath}}{{slide.img}}?rand={{rand}}"/>
</li>
</ul>
我正在尝试修改它的代码,以便它不会滑动到下一个图像,除非当前图像已完全加载(以避免快速 slider 半加载图像并移动到下一个图像的情况)。我被困在如何在指令中捕获这个图像加载事件。做
element.bind("load")
不起作用,因为该指令未应用于图像元素。谢谢!
最佳答案
查看此工作演示:JSFiddle
使用 anguler.element
找到img
元素并绑定(bind)事件。
在您的指令中,它应该是 element.find('img')
.
angular.module('Joy', [])
.directive('hello', [function () {
return {
restrict: 'A',
link: function (scope, ele) {
var img = ele.find('img');
console.log(img);
img.bind('load', function () {
console.log('img is loaded');
});
}
};
}]);
HTML:<div ng-app="Joy">
<div hello>
<img ng-src="https://www.google.com.hk/images/srpr/logo11w.png">
</div>
</div>
更新 1
如果使用
ng-repeat
, 添加 $timeout
等待ng-repeat
首先完成。检查工作演示:JSFiddle .注意:这个演示正在加载一个非常大的图像。图片加载后,文字
img is loaded
将显示。更新 2
如果事件绑定(bind)不起作用,请尝试原生
image.onload
绑定(bind)(或 oncomplete
以查找缓存的图像)。工作演示:JSFiddle .
关于angularjs - 检测图像是从指令完全加载的,其中指令未应用于图像元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31665668/