angular.js - 关于angular排序筛选后,懒加载的图片无法显示的问题。
过去多啦不再A梦
过去多啦不再A梦 2017-05-15 17:04:43
0
2
591

使用的是这个插件:https://github.com/angular-di...
原理都差不多,判断是否在窗口内,再加载图片;
基本的都可以实现了,但是:
在添加了排序或者筛选功能后(angular的orderBy、filter),列表排序发生改变,把原本在下面(还未显示图片的列表项)提到了上面,但是不能正常显示图片,
我的理解:orderBy排序和filter是改变已请求过来的数据,不会触发写在img标签中的ui-lazyload指令。

执行判断是否在窗口的函数是封装在指令中的,请问如何在执行了排序、过滤之后调用那个函数?


正常情况是上面的样子
但是一排序,下面的列表项网上提之后:


lazyload指令不会执行,出发滚动一下滚动条,因为指令中判断图片是否在可视区是绑定在滚动事件中的。

好多天了还没找到解决方法。。。

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)
         }

结构列表源码:

        <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>
过去多啦不再A梦
过去多啦不再A梦

membalas semua(2)
phpcn_u1582

Cuba pencetus tatal secara manual selepas mengisih.

$(window).scroll();
阿神

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!