angularjs – 检测图像是从指令完全加载的,其中指令未应用于图像
在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”)不起作用,因为指令未应用于图像元素. 谢谢!
查看此工作演示:
JSFiddle
使用 在你的指令中,它应该是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. 更新2 如果事件绑定不起作用,请尝试本机image.onload绑定(或oncomplete以查找缓存的图像).工作演示:JSFiddle. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |