https://github.com/Treri/me-lazyload
https://github.com/Treri/me-lazyimg

The two functions are similar. The former one is placed in the document for scrolling, and the latter one can be set to be scrolled in an element

Idea:
1. Do not use the real address of the src of the image. Use an attribute to save it on the element
2. Put all the images that need to be loaded into an array,
3. During initialization, check whether the elements in the array are within the visible range. If they are within the visible range, they will be loaded
4. Bind scroll events to window to check whether the image is within the visible range
5. The loaded pictures are deleted from the queue

Original link: https://www.npmjs.com/package/angular-imglazyload

What jquery does is to monitor window.scroll, and then determine the position of the image and whether it needs to switch the src attribute. The same is true for angular, but because angular needs to write the DOM operation in the instruction, you need to implement the instruction yourself. The general idea is as follows ;

html<lazyload>
    <img data-source="real.png" src="holder.png" />
</lazyload>

javascriptangular.module('yourapp').directive('lazyload', function () {
  return {
    restrict: 'EA',
    replace: false,
    link: function (scope, element, attrs) {
      angular.element(window).on('scroll', function() {
        // 计算距离 切换img属性
      });
    }
  };
});

If you want the efficiency to be like jquery, with only one listener, then the logic of this lazyLoad needs to consider how to query IMG
If you want to be simple and save trouble, just write the command directly at the img attribute level, but this will register as many event callbacks as the image

http://afklm.github.io/ng-lazy-image/ Many people have made this module. This link looks good and is very easy to use

You should use $timeout to delay loading