使用 Angular 指令（如 ngShow 和 ngHide）加载许多图像不吸引人

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）加载许多图像不吸引人

Unattractive loading of many images using Angular directives like ngShow and ngHide

loading

angularjs

ng-show

ng-hide