Scroll To Load
Register the lazy loader directive on a container element to lazy load images when they enter the browser window viewport. Also, by default, the images/videos load whenever their top or bottom plane is in the viewport. You can set the threshold attribute that accepts a pixel value to load the asset when it is 'threshold' pixels away (vertically) from the viewport.
ngIf caveat
If an image/video was inside an ngIf block, you will have to load it programmatically by executing $scope.$emit('selectiveLoad') when the ngIf expression evaluates to true.
$scope.$emit('selectiveLoad') may be fired before the lazy loader directive has been registered. In such a case, just wrap the $emit inside a setTimeout or $timeout
Lazy loading inside scrollable container
Register the lazy loader directive on the scrollable container to lazy load assets when the container is scrolled instead of when the window is scrolled.
backgroundImage
You can also lazy load background images by setting data-src on a div element.