在加载图像之前不显示图像

Don't display an image until it's loaded

本文关键字：图像 显示 显示图 加载      更新时间：2023-09-26

// 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>

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

演示：（按change object加载新图像并更改标题）

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

注意：我不使用 jQuery

工作演示

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

.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 >

我相信你正在寻找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

这可能有助于您：

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

您可以通过两个步骤来完成。首先添加 ng-show 以在加载元素时隐藏或显示元素。第二次使用 onLoad 事件来了解它何时完成加载。我从这个答案中选择了指令

.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;
}

普伦克

相关文章：