107

我有看起来像的图像<img ng-src="dynamically inserted url"/>。加载单个图像时,我需要应用 iScroll refresh() 方法以使图像可滚动。

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

4

6 回答 6

188

这是一个如何调用图像加载的示例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 />
于 2013-07-26T14:59:04.040 回答
149

我对此进行了一些修改,以便$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 方法

于 2014-09-01T16:26:04.743 回答
9

@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');
        });
    }
  };
});
于 2015-05-28T16:28:20.150 回答
5

我的答案:

 var img = new Image();
 var imgUrl = "path_to_image.jpg";
 img.src = imgUrl;
 img.onload = function () {
      $scope.pic = img.src;
 }
于 2017-09-26T21:07:46.997 回答
4

刚刚更新了之前的代码..

<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);
                });
            }
        };
    })
于 2016-04-28T12:22:03.937 回答
0

基本上这是我最终使用的解决方案。

$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);
            });
        }
    };

}]);
于 2016-07-15T08:01:25.030 回答