检测图像是从指令完全加载的,其中指令未应用于图像元素

Question

在SO中有很多关于我们如何使用角度指令来知道图像何时被加载的例子.这些示例描述了一个直接应用于img元素的指令,如下所示:

<img ng-src="myimage.jpg" my-great-directive />

然后在指令"我 - 伟大的指令"

我们可以做一个:

element.bind("load" , function(e){ }

我工作得很好.

但是,如果构造如下所示:

<div my-great-directive>
  <img ng-src="myimage.jpg" />
</div>

在my-great-directive中,如何绑定内部图像加载事件？

这对我来说不是一个理论上的问题.我正在使用名为angular-carousel-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>

我正在尝试修改其代码,以便它不会滑动到下一个图像,除非当前图像完全加载(以避免快速滑块半加载图像并移动到下一个图像的情况).我被困在如何在指令中捕获这个图像加载事件.这样做element.bind("load")的指令不应用到图像元素不起作用.

谢谢!

Answer 1

检查这个工作演示:JSFiddle

使用anguler.element查找img元素并绑定该事件.

在你的指令中,它应该是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

如果事件绑定不起作用,请尝试本机image.onload绑定(或oncomplete查找缓存的图像).工作演示:JSFiddle.