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

Les deux fonctions sont similaires, la première est placée dans le document pour le défilement, et la seconde peut être configurée pour défiler dans un élément

Answer 2

Choses :
1. N'utilisez pas la véritable adresse du src de l'image. Utilisez un attribut pour la sauvegarder sur l'élément
. 2. Mettez toutes les images qui doivent être chargées dans un tableau,
3. Lors de l'initialisation, vérifiez si les éléments du tableau sont dans la plage visible, s'ils sont dans la plage visible, ils seront chargés
. 4. Liez les événements de défilement à la fenêtre pour vérifier si l'image est dans la plage visible
5. Les images chargées sont supprimées de la file d'attente

Lien original : https://www.npmjs.com/package/angular-imglazyload

Answer 3

Ce que fait jquery, c'est d'écouter window.scroll, puis de déterminer la position de l'image et si elle doit changer l'attribut src. La même chose est vraie pour angulaire, mais parce qu'angulaire doit écrire l'opération DOM dans le fichier. instruction, vous devez probablement mettre en œuvre l'instruction vous-même. L'idée est la suivante

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属性
      });
    }
  };
});

Si vous voulez que l'efficacité soit comme jquery, avec un seul écouteur, alors la logique de ce lazyLoad doit considérer comment interroger IMG
Si vous voulez que ce soit simple et sans problème, écrivez simplement la commande directement au niveau de l'attribut img, mais cela enregistrera autant de rappels d'événements que l'image

Answer 4

http://afklm.github.io/ng-lazy-image/ De nombreuses personnes ont créé ce module. Le lien a l'air bien et il est facile à utiliser

.

Answer 5

Vous devez utiliser $timeout pour retarder le chargement