angular-images-loaded
Version:
Super simple Angular directive to wrap imagesLoaded plugin
34 lines (21 loc) • 991 B
HTML
<html>
<head>
<title>angular-images-loaded</title>
<link rel="stylesheet" type="text/css" href="example/styles.css">
</head>
<body ng-app="ExampleApp" ng-controller="ExampleCtrl as vm">
<div class="wrapper images-loaded"
images-loaded-events="vm.imageLoadedEvents"
images-loaded-options="{ background: true }"
images-loaded-watch="vm.image"
images-loaded-done="vm.done = true"
ng-style="{ color: vm.done ? 'green' : 'red' }">
<img ng-src="{{vm.image}}" ng-click="vm.clickImage()">
<p ng-show="$imagesLoaded">Caption here</p>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="angular-images-loaded.js"></script>
<script type="text/javascript" src="example/app.js"></script>
</body>
</html>