angulaire.js - Comment implémenter le chargement paresseux d'images dans AngularJS?
某草草
某草草 2017-05-15 16:51:49
0
5
865

É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 ?

某草草
某草草

répondre à tous(5)
仅有的幸福

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

我想大声告诉你

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

阿神

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

Peter_Zhu

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

.
淡淡烟草味

Vous devez utiliser $timeout pour retarder le chargement

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal