JSFiddle - React, Tailwind, and code Playground

by Tyler Eich

HTML

<body ng-app="app" class="ng-scope">
  <div ng-controller="MainCtrl" class="ng-scope">
    <img ng-src="{{ src }}" img-load ng-load="onLoad()">
</div>

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() {
    return {
        restrict: 'A',
        scope: {
            loadHandler: '&ngLoad'
        },
        link: function (scope, element, attr) {
            element.on('load', scope.loadHandler);
        }
    };
}]);

app.controller('MainCtrl', function ($scope, $timeout) {
    $scope.src = "http://lorempixel.com/1920/1080";
    
    $scope.onLoad = function () {
        // Timeout allows image to fully render (except when JSFiddle first loads)
        $timeout(function() {
            alert("Image has loaded!");
        });
    };
});