在加载实际图像之前设置默认图像 [英] Set default image before actual image is loaded

问题描述

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

In my application, several images are loaded, however when the view is opened, you can clearly see each image being loaded, by this I mean the top half of the image appears and it keeps increasing till the full image is displayed. I do not want this.

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

My images are inside an ng-repeat, what i want to do is when the page is loaded all images are set to a default image that comes bundled with the app. Now after my function has returned all new image URLs and those images have been fully loaded then they should replace the default images.

所以基本上是这样的：

1. 打开视图


2. 将所有图像设置为 default.jpg


3. 获取数据。


4. 等待新图像完全加载。


5. 用新图像替换默认图像从服务器获取的URL。

1. Open view
2. Set all images to default.jpg
3. Get data.
4. Wait for new images to load fully.
5. Replace default images with new image URL fetched from the server.

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

I have never done this before and do not know how to go about it.

推荐答案

您可以这样写：

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

然后你可以使用如下指令：

Then you can use a directive like:

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

这篇关于在加载实际图像之前设置默认图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！