Angularjs Lazyload images

angular-lazyimage.js

/**
      <div lazyimg lowres="small_landscape.jpg" highres="large_landscape.jpg" class="lazy-loader">

      </div>

**/


    angular.module('lazy', [])
      .directive('lazyimg', function (){
        return {
          restrict: 'ACE',
          template : function (element, attr){
            return '<img class="low-resolution-image" src="' + attr.lowres + '"></img><img class="hidden high-resolution-image" src="' + attr.highres + '"></img>';
          },
          compile : function (element){
            var lowres  = element[0].getElementsByClassName('low-resolution-image');
            var highres = element[0].getElementsByClassName('high-resolution-image');
            angular.element(highres).bind('load', function (){
              angular.element(lowres).addClass('hidden');
              angular.element(highres).removeClass('hidden').unbind('load');
            });
          }
        };
      });