JSFiddle - React, Tailwind, and code Playground

by Tyler Eich

HTML

<body ng-app="app">
    <div ng-controller="Ctrl">
        <img img-load="onLoad()" src="http://lorempixel.com/1920/1080" />
    </div>
</body>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    max-height: 100%;
}

JavaScript

var app = angular.module('app', []);

app.directive('imgLoad', function($parse) {
    return {
        restrict: 'A',
        scope: {
            loadHandler: '&imgLoad',
        },
        link: function(scope, element, attr) {
            element.on('load', scope.loadHandler);
        }
    };
});

function Ctrl($scope, $timeout) {
    $scope.onLoad = function() {
        $timeout(alert('Image Loaded'));
    };
}