angular.js - How to implement lazy loading of images in angularjs?

Question

Write a web page that displays a list of images on the mobile terminal. In the past, jQuery's lazy loading plug-in was used to implement this function, but now it is required that jQuery and other plug-ins cannot be used, and only angularjs is used to implement this function. The path of the image is stored in a json and is obtained by reading the json data ng-repeat.
Is there any good solution?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

You should use $timeout to delay loading