angular.js - angularjs如何实现图片延迟加载？

Question

写一个移动端显示图片列表的web，以往都是使用jQuery的延迟加载插件来实现这一功能的，但是现在要求不能使用jQuery以及其他插件，仅使用angularjs实现这个功能。图片的路径是存储在一个json中，通过读取json的数据ng-repeat出来的。
请问有什么好的解决方法？

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