angulaire.js - Concernant le problème selon lequel les images chargées paresseusement ne peuvent pas être affichées après le tri et le filtrage angulaires.

Question

J'utilise ce plug-in : https://github.com/angular-di...
Les principes sont similaires, il suffit de déterminer s'il est dans la fenêtre puis de charger l'image
Les bases peuvent être implémentées cependant :
Après avoir ajouté la fonction de tri ou de filtrage (angular's orderB). y, filtre), le tri de la liste a changé, et les éléments de la liste qui étaient à l'origine en dessous (l'image n'a pas encore été affichée) sont mentionnés ci-dessus, mais l'image ne peut pas être affichée normalement
Ma compréhension : l'ordrePar tri et. des modifications de filtre ont été demandées. Les données ne déclencheront pas l'instruction ui-lazyload écrite dans la balise img.

La fonction qui détermine si elle est dans la fenêtre est encapsulée dans l'instruction Comment appeler cette fonction après le tri et le filtrage ?

La situation normale est la même que ci-dessus
Mais après tri, les éléments de liste suivants sont mis en ligne :

La commande lazyload ne sera pas exécutée. Commencez à faire défiler la barre de défilement, car la commande permettant de déterminer si l'image est dans la zone visible est liée à l'événement de défilement.

Je n’ai pas trouvé de solution depuis plusieurs jours. . .

Code source du jugement de Lazyload

//  元素是否在可视区域
         var isVisible = function(ele){
             var element = ele[0];
             var o = {};
             var offsetTop = element.offsetTop;
             var offsetLeft = element.offsetLeft;
             while(element = element.offsetParent) {
                 offsetTop += element.offsetTop;
                 offsetLeft += element.offsetLeft;
             }
             o.left = offsetLeft;
             o.top = offsetTop;

             if($(window)[0].parent.innerHeight < o.top
                    &&  $(window)[0].pageYOffset + $(window)[0].parent.innerHeight < o.top 
                    ||  $(window)[0].pageYOffset >( o.top + ele[0].height)) {
                 return false;
             }else{
                 return true;
             }
         }

         //  检查图片是否可见
         var checkImage = function(){
             var eles = elements.get();
             angular.forEach(eles ,function(v , k){
                 // console.log(v)
                 isVisible(v.elem) ? eles[k].load(k) : false ;
             })
         }

         var initLazyload = function(){
                checkImage();
                $(window).on('scroll' , checkImage)
         }

Code source de la liste des structures :

        <ul class="listbox" > <!--  | filter:chose track by $index -->
            <li ng-repeat="con in list | filter:chose | orderBy:order" class="row listone">
                <p class="imgbox col-sm-4">
                    <a ui-sref="dec({id:con.id})" title="">
                        <img src="" alt="" title="" data-ui-lazyload="{{con.imageUrl}}" watch="watch" repeat-end>
                    </a>
                </p>
                <p class="textbox col-sm-6">
                    <h2><a ui-sref="dec({id:con.id})" title="">{{con.name}}</a></h2>
                    <p><a ui-sref="dec({id:con.id})" title="">{{con.snippet}}</a></p>
                </p>
            </li>
        </ul>

Answer 1

Essayez de déclencher manuellement le défilement après le tri.

$(window).scroll();

Answer 2

Théoriquement parlant, cela n'a rien à voir avec le filtre et l'ordre. La directive doit être triée et prête lorsqu'elle obtient l'élément (il faut vérifier si elle est rendue). Vous pouvez la saisir dans la méthode isVisible. Point d'arrêt pour voir quelles sont les informations de position de l'élément entrant, et vous pouvez également vérifier si l'élément a été préparé (rendu). Si les informations de position de l'élément sont correctes, cela signifie qu'il peut y avoir un problème avec le jugement ultérieur. logique. Vérifiez soigneusement les points d'arrêt. Si les informations de position sont incorrectes, elles sont vraiment liées au mécanisme de rendu d'Angular et la méthode de traitement doit être prise en compte.