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>