Question

我一直在使用Angular一段时间，而且我总是使用ngShow，ngHide，ngIf等。

使用这些指令显示和隐藏图像时遇到的问题是在指令设置为true或false之后的一秒钟，图像尚未加载。页面空白片刻，然后图像以小块的形式出现。

是否有某种方法可以跟踪视图中的所有图像是否已从服务器检索并完成渲染？这样我就可以使用加载微调器或其他东西，直到所有图像都100％准备就绪。

Answer 1

如果要执行某些代码，当图像完全加载时，您可以在AngularJS中使用自定义指令，如：

app.module['myApp'].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);


            });
        }
    };
});

用法：

<img ng-src="src" image-onload="customFonction()" />

使用Angular指令（如ngShow和ngHide）对许多图像进行无吸引力的加载

1 个答案: