AngularJS 中 ng-src 的图像加载事件 [英] Image loaded event in for ng-src in AngularJS

问题描述

我的图像看起来像 <img ng-src="动态插入的 url"/>.当加载单个图像时，我需要应用 iScroll refresh() 方法以使图像可滚动.

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.

了解图像何时完全加载以运行某些回调的最佳方法是什么?

What is the best way to know when an image is fully loaded to run some callback?

推荐答案

这里是一个如何调用 image onload 的例子 http://jsfiddle.net/2CsfZ/2/

Here is an example how to call image onload http://jsfiddle.net/2CsfZ/2/

基本思想是创建一个指令并将其作为属性添加到 img 标签中.

Basic idea is create a directive and add it as attribute to img tag.

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 />

这篇关于AngularJS 中 ng-src 的图像加载事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！