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

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);
                 }
             });
         }
    }
}]);

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

Set default image before actual image is loaded

image

angularjs

ionic