angular.js - Mengenai masalah bahawa imej yang dimuatkan malas tidak boleh dipaparkan selepas pengisihan dan penapisan sudut.

Question

Saya menggunakan pemalam ini: https://github.com/angular-di...
Prinsipnya adalah serupa, cuma tentukan sama ada ia berada dalam tetingkap dan kemudian muatkan imej
Asas boleh dilaksanakan. Walau bagaimanapun:
Selepas menambah fungsi pengisihan atau penapisan (perintah sudutB y, penapis), pengisihan senarai telah berubah dan item senarai yang asalnya di bawah (gambar masih belum dipaparkan) disebut di atas, tetapi gambar tidak boleh dipaparkan seperti biasa
Pemahaman saya: pesananMengikut dan perubahan penapis telah diminta. Data tidak akan mencetuskan arahan ui-lazyload yang ditulis dalam teg img.

Fungsi yang menentukan sama ada ia berada dalam tetingkap dirangkumkan dalam arahan. Bagaimana untuk memanggil fungsi itu selepas mengisih dan menapis?

Situasi biasa adalah seperti di atas
Tetapi selepas mengisih, item senarai berikut dimuat naik dalam talian:

Perintah lazyload tidak akan dilaksanakan.

Saya tidak menemui penyelesaian selama beberapa hari. . .

Kod sumber pertimbangan 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)
         }

Kod sumber senarai struktur:

        <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

Cuba pencetus tatal secara manual selepas mengisih.

$(window).scroll();

Answer 2

Secara teorinya, ia tidak ada kaitan dengan penapis dan susunan arahan itu harus diisih dan sedia apabila ia mendapat elemen (sama ada anda boleh menaipnya dalam kaedah isVisible). Titik putus untuk melihat maklumat kedudukan ele masuk, dan anda juga boleh mengesahkan sama ada elemen telah disediakan (diberikan Jika maklumat kedudukan elemen itu betul, ini bermakna mungkin terdapat masalah dengan penghakiman seterusnya). Berhati-hati memeriksa titik rehat Jika maklumat kedudukan tidak betul, ia benar-benar berkaitan dengan mekanisme pemaparan Angular sendiri, dan kaedah pemprosesan perlu dipertimbangkan.