AngularJS中ng-src的图像加载事件

Posted 2023-03-05

【中文标题】AngularJS中ng-src的图像加载事件

【英文标题】：Image loaded event in for ng-src in AngularJS

【发布时间】：2013-07-26 21:40:43

【问题描述】：

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

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

【问题讨论】：

看看$http Response Interceptors。当 promise 解决时，您可以使用它来注册回调

【参考方案1】：

这是一个如何调用图像加载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 />

【讨论】：

失败回调呢？

渐进式图像呢？

【参考方案2】：

我对此稍作修改，以便可以调用自定义 $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 方法

【讨论】：

没错。在我像你一样使用 $apply() 之前，Mikach 的解决方案对我不起作用。

这是提供的最佳答案。也完全消除了任何 JQUERY 加载的需要。

感谢您放置分号，这样 lint 就不会爆炸。

这给了我这个错误：code.angularjs.org/1.4.9/docs/error/$rootScope/…

【参考方案3】：

@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');
        );
    
  ;
);

【讨论】：

在 'imageonerror' 指令中可能会更好，这样您就可以执行不同的操作。

【参考方案4】：

我的回答：

 var img = new Image();
 var imgUrl = "path_to_image.jpg";
 img.src = imgUrl;
 img.onload = function () 
      $scope.pic = img.src;
 

【参考方案5】：

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

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

【参考方案6】：

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

$apply() 只能在适当的情况下由外部资源使用。

然后使用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);
            );
        
    ;

]);

【讨论】：

您所说的“$apply() 只能由外部资源使用”是什么意思？我没有关注。

@genuinefafa 他所说的“外部资源”是指非 Angular 代码。因此，例如，如果您使用通用 JS 事件侦听器来调用更改 $scope 的代码，则需要在那里使用 $apply。但如果它是 Angular 事件或 $scope 函数，则不需要 $apply，因为 $digest 循环已经从 Angular 方法运行。