在加载之前不要显示图像答案

【问题标题】：Don't display an image until it's loaded在加载之前不要显示图像
【发布时间】：2016-06-29 07:53:21
【问题描述】：

// Code goes here

angular
  .module('imgapp', [])
  .controller('mainCtrl', mainCtrl);
  
function mainCtrl() {
  var vm = this;
  
  vm.first = {
    title: 'Image 1',
    url: 'http://www.image-mapper.com/photos/original/missing.png'
  }
  
  vm.second = {
    title: 'Image 2',
    url: 'http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg'
  }
  
  vm.primary = vm.first;
  
  vm.changeObject = function() {
    vm.primary = vm.second;
  }
}

<html ng-app="imgapp">
  <head>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl as vm">
    <button ng-click="vm.changeObject();">Change object</button>
    <h1>{{vm.primary.title}}</h1>
    <img ng-src="{{vm.primary.url}}">
  </body>
</html>

我有一个带有标题和图像的块。此块中的数据可以更改，因此应加载另一个图像。
如果您的互联网连接速度较慢，您会看到标题已更改，其中图片没有，因为它尚未加载。

Demo：（按change object加载新图片并更改标题）

如何在加载新图像之前隐藏旧图像？

注意：我不使用 jQuery

【问题讨论】：

可能重复stackoverflow.com/questions/51352/…

标签： javascript html angularjs

【解决方案1】：

Working demo

我刚刚创建了一个指令，它将在图像加载时调用一个函数。

.directive('imageonload', function() {
    return {
        restrict: 'A',
        scope: {
          ngShow : '='
        },
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
                scope.$apply(function(){
                    scope.ngShow = true;  
                });

            });
            element.bind('error', function(){
                alert('image could not be loaded');
            });
        }
    };
});

和修改过的html一样，

<img ng-show="vm.isImageVisible" ng-src="{{vm.primary.url}}" imageonload >

【讨论】：

在显示和隐藏图像的同时我们可以应用 css 吗？

【解决方案2】：

我相信您正在寻找 ng-cloak 指令：https://docs.angularjs.org/api/ng/directive/ngCloak

所以你的例子可以是这样的：

<body ng-controller="mainCtrl as vm">
  <button ng-click="vm.changeObject();">Change object</button>
  <div ng-cloak>
    <h1>{{vm.primary.title}}</h1>
    <img ng-src="{{vm.primary.url}}">
  </div>
</body>

http://plnkr.co/edit/rf8hM9JvR7EnjS1eWOgp?p=preview

【讨论】：

它在加载之前不会显示图像，但它不会隐藏旧图像

【解决方案3】：

这可能会对您有所帮助：

var image = imageDomReferenceHere;
var downloadingImage = new Image();
downloadingImage.onload = function(){
   image.src = this.src;   
};
downloadingImage.src = "image path here";

http://blog.teamtreehouse.com/learn-asynchronous-image-loading-javascript

【讨论】：

【解决方案4】：

您可以分两步完成。首先添加 ng-show 以在加载时隐藏或显示元素。第二次使用 onLoad 事件来知道它何时完成加载。我从这个answer中挑选了指令

html

vm.notLoading = true;
vm.imageLoaded = imageLoaded;

指令

function imageonload() {
    return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.bind('load', function() {
            //call the function that was passed
            scope.$apply(attrs.imageonload);
        });
    }
}

控制器

...

vm.notLoading = true;
vm.imageLoaded = imageLoaded;

...

vm.changeObject = function() {
    vm.notLoading = false;
    vm.primary = vm.second;
}

function imageLoaded() {
    vm.notLoading = true;
}

plunker

【讨论】：