Plunkr: https://plnkr.co/edit/ukaCGifwNfhqJmTHDwGR?p=preview
What I want to achieve: I want the image to load successfully before it shows the image so that the image doesn't show little by little.
On my plunkr, it looks fine enough but on my live site, it loads little by little.
For reference: http://ishq.org/ --The image loads completely before it fades in.
<!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)
}]);
MODAL:
<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>
