Question

我通过ng-repeat加载了一个列表，其中每个元素都包含img标记。我想显示某种加载指示器（遮挡列表项），直到每个项目中的每个图像都完成加载。

我想我需要通过角度back-img指令挂钩某个事件广播，但我真的不知道从哪里开始。

Answer 1

好的，所以我解决了我的问题。首先，@弗拉基米尔，你是完全正确的 - back-img是我同事写的一个指令，它给我解决了一段时间的解决方案。

我所做的就是编写一个非常简单的指令，在$scope的{{1}}事件中调用img绑定函数。我的控制器计算已加载的图像数量，一旦加载了足够的图像，它将删除加载指示器并显示图像列表。以下是代码摘要：

我的指示：

load

在元素中：

app.directive('loadedImage', function($parse) {
return {
    restrict: 'A',
    scope: true,
    link: function(scope, element, attrs) {
        element.bind("load", function(event) {
            var invoker = $parse(attrs.loadedCallback);
            invoker(scope);
            });
        }
    }
});

最后，在控制器内：

<img ng-src='{{ item.large }}' loaded-image loaded-callback="imageLoaded(r.id)">

我不确定这是正确的方法，但它对我来说是可靠的！

Answer 2

我不知道任何back-img指令，但图像加载是异步的，你通常不能保证你的第3张图像会在你的第8张图像之前加载。

我要做的是为每个通过ng-repeat添加的img标记添加一个'onload'监听器，并通过计算'onload'命中数并将其与总数进行比较，简单地找出所有图像的加载时间图像数量。

这基本上是https://github.com/desandro/imagesloaded所做的，但是在jquery-land中。

在ng-repeat中加载背景图像时显示加载屏幕

2 个答案: