問(wèn)題描述

使用的是這個(gè)插件：https://github.com/angular-di...原理都差不多，判斷是否在窗口內(nèi)，再加載圖片；基本的都可以實(shí)現(xiàn)了，但是：在添加了排序或者篩選功能后(angular的orderBy、filter)，列表排序發(fā)生改變，把原本在下面(還未顯示圖片的列表項(xiàng))提到了上面，但是不能正常顯示圖片，我的理解：orderBy排序和filter是改變已請(qǐng)求過(guò)來(lái)的數(shù)據(jù)，不會(huì)觸發(fā)寫(xiě)在img標(biāo)簽中的ui-lazyload指令。

執(zhí)行判斷是否在窗口的函數(shù)是封裝在指令中的，請(qǐng)問(wèn)如何在執(zhí)行了排序、過(guò)濾之后調(diào)用那個(gè)函數(shù)？

正常情況是上面的樣子但是一排序，下面的列表項(xiàng)網(wǎng)上提之后：

lazyload指令不會(huì)執(zhí)行，出發(fā)滾動(dòng)一下滾動(dòng)條，因?yàn)橹噶钪信袛鄨D片是否在可視區(qū)是綁定在滾動(dòng)事件中的。

好多天了還沒(méi)找到解決方法。。。

lazyload的判斷源碼

// 元素是否在可視區(qū)域 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; } } // 檢查圖片是否可見(jiàn) 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) }

結(jié)構(gòu)列表源碼：

<ul > <!-- | 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})'><img src='http://www.intensediesel.com/wenda/14258.html' alt='' 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})'>{{con.name}}</a></h2> <p><a ui-sref='dec({id:con.id})'>{{con.snippet}}</a></p></p> </li></ul>

問(wèn)題解答

試試在排序完之后手動(dòng)觸發(fā)一下scroll。

$(window).scroll();回答2：

理論上講跟filter和order是沒(méi)有關(guān)系的，directive在拿到element的時(shí)候應(yīng)該是已經(jīng)排好序準(zhǔn)備好的了（是否渲染好有待驗(yàn)證），你可以在isVisible方法里打個(gè)斷點(diǎn)，看看傳進(jìn)來(lái)的ele的位置信息是怎么樣的，也可以驗(yàn)證得到element是否已經(jīng)準(zhǔn)備（渲染）好了，如果element的位置信息是對(duì)的話，說(shuō)明后面的判斷邏輯可能有問(wèn)題，要仔細(xì)打斷點(diǎn)檢查一下，如果位置信息不對(duì)，那就真跟angular本身的渲染機(jī)制有關(guān)系了，處理方法待考慮。