angulaire.js - Comment implémenter le chargement paresseux d'images dans AngularJS?

Question

Écrivez une page Web qui affiche une liste d'images sur le terminal mobile. Dans le passé, le plug-in de chargement paresseux de jQuery était utilisé pour réaliser cette fonction, mais il est désormais obligatoire que jQuery et d'autres plug-ins ne puissent pas être utilisés. , et seul angulairejs est utilisé pour implémenter cette fonction. Le chemin de l'image est stocké dans un json et est obtenu en lisant les données json ng-repeat.
Existe-t-il une bonne solution ?

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