Question

所以，我有一个用ngRepeat显示一些数据的表：

<tr class="item" ng-repeat="media in items | filter: search | orderBy: sortType: sortReverse">
<td>
<img ng-src="{{media.path + 'thumbnail-' + media.filename}}" onimageload>
</td>
<td>
{{media.title}}
</td>
...

像这样的图像onload的指令：

app.directive('onimageload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
            });
        }
    };
});

现在，如何隐藏每个项目，直到他的图像被加载？

Answer 1

一种方法：在父指令链接中预加载图像，并在那里监视它们的onload事件：

angular.forEach(scope.items, function(media) {
    var preloaded = new Image();
    preloaded.src = media.path + 'thumbnail-' + media.filename;
    preloaded.onload = function() {
        media.hasLoaded=true;
    };
})

然后

<tr ng-repeat="media in items" ng-if="media.hasLoaded">.....</tr>

ng-if将阻止多个请求进入同一图像的服务器，因为其内容（包括<img>标记）在图像已经存在于浏览器内存中之后才会呈现。< / p>

（注意这不会使用你的onimageload指令，因为这会涉及将hasLoaded变量传递到$parent，这总是让我觉得很蠢。在任何指令中执行一次就会呈现你的{ {1}}而不是为每个图像实例化单独的指令。）

隐藏整个项目，直到图像加载

1 个答案: