Question

在我的应用程序中，加载了几个图像，但是当打开视图时，您可以清楚地看到每个图像被加载，我的意思是图像的上半部分出现并且它一直在增加，直到显示完整图像。我不想要这个。

我的图片在ng-repeat内，我想要做的是当页面加载时，所有图像都设置为与应用程序捆绑在一起的默认图像。现在，在我的函数返回所有新图像URL并且这些图像已经完全加载之后，它们应该替换默认图像。

基本上就是这样：

打开视图
将所有图片设为default.jpg
获取数据。
等待新图像完全加载。
使用从服务器获取的新图像URL替换默认图像。

我之前从未这样做过，也不知道如何去做。

Answer 1

您可以这样写：

<div ng-repeat="user in users">
    {{user.name}}<br>
    <img src="/images/foo/demp/default.png" actual-image="{{user.avatar}}" />
</div>

然后你可以使用像：

这样的指令

myApp.directive('actualImage', ['$timeout', function($timeout) {
    return {
         link: function($scope, element, attrs) {
             function waitForImage(url) {
                 var tempImg = new Image();
                 tempImg.onload = function() {
                     $timeout(function() {
                         element.attr('src', url);
                     });
                 }
                 tempImg.src = url;
             }

             attrs.$observe('actualImage', function(newValue) {
                 if (newValue) {
                     waitForImage(newValue);
                 }
             });
         }
    }
}]);

在加载实际图像之前设置默认图像

1 个答案: