Question

Plunkr：https://plnkr.co/edit/ukaCGifwNfhqJmTHDwGR?p=preview

我想要实现的目标： 我希望图像在显示图像之前成功加载，这样图像就不会一点一点地显示出来。

在我的plunkr上，它看起来很好，但在我的现场，它一点一点地加载。

供参考：http://ishq.org/ - 图像在淡入之前完全加载。

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <script src="app.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css">
  </head>

  <body>

<div ng-controller="projectCtrl">

<div ng-repeat="x in vegetables">
      <button type="button" class="btn two btn-default" ng-click="open(x)">{{x.name}}</button>


</div>

</div>
  </body>
</html>

JS：

// Code goes here

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);



// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

app.controller("projectCtrl", ["$rootScope", "$scope", "$filter", "$uibModal", function ($rootScope, $scope, $filter, $uibModal) {
    $scope.vegetables = [
    {name:'Carrot', dev: '1', age:25, gender:'boy', image:"https://upload.wikimedia.org/wikipedia/commons/e/e4/Stourhead_garden.jpg"},
    {name:'Apple', age:30, gender:'girl', image: "https://upload.wikimedia.org/wikipedia/commons/6/67/Inside_the_Batad_rice_terraces.jpg"},
    {name:'Beef', dev: '1', age:28, gender:'girl'},
    {name:'Cow', age:15, gender:'girl'},
    {name:'Chicken', age:28, gender:'girl'},
    {name:'Pork', age:95, gender:'boy'},
    {name:'No ', age:50, gender:'boy'},
    {name:'Brocolibeef', age:27, gender:'girl'},
    {name:'BeefBeef', age:40, gender:'boy'},
    {name:'HorseBeef', age:60, gender:'girl'}
  ];

   $scope.open = function (_details) {
     console.log(_details)
        $uibModal.open({
            templateUrl: 'modal.html',
            controller: 'PopupCtrl',
            windowClass: 'app-modal-window',
            scope: $scope,
            resolve : {
                     details : function() {
                        return  _details;
                    }
                }
        })
        .result.then(function() {

        }, function() {

        });
    };


}]);

app.controller("PopupCtrl", ["$rootScope", "$scope", "$filter", "$uibModal", 'details' , function ($rootScope, $scope, $filter, $uibModal , details) {
  $scope.vegetabledetails = details;
  console.log($scope.vegetabledetails)

}]);

模态：

<style>
  imgs{
    height:300px;
  }
</style>

<div class="vegetable-name">
 Name: {{vegetabledetails.name}}
</div>
<div class="age">
 Age: {{vegetabledetails.age}}
 <img src={{vegetabledetails.image}} class="imgs">
</div>

Angular：从JSON预加载图像

0 个答案: