国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術(shù)文章
文章詳情頁

angular.js - 關(guān)于angular排序篩選后,懶加載的圖片無法顯示的問題。

瀏覽:195日期:2024-09-29 10:09:31

問題描述

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

執(zhí)行判斷是否在窗口的函數(shù)是封裝在指令中的,請問如何在執(zhí)行了排序、過濾之后調(diào)用那個函數(shù)?

angular.js - 關(guān)于angular排序篩選后,懶加載的圖片無法顯示的問題。正常情況是上面的樣子但是一排序,下面的列表項網(wǎng)上提之后:

angular.js - 關(guān)于angular排序篩選后,懶加載的圖片無法顯示的問題。lazyload指令不會執(zhí)行,出發(fā)滾動一下滾動條,因為指令中判斷圖片是否在可視區(qū)是綁定在滾動事件中的。

好多天了還沒找到解決方法。。。

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; } } // 檢查圖片是否可見 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://m.cgvv.com.cn/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>

問題解答

回答1:

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

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

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

主站蜘蛛池模板: 国产成人mv在线观看入口视频 | 国产人成精品 | 一级做a爰片久久毛片人呢 一级做a爰片久久毛片唾 | 国内自拍亚洲 | 奇米5555| 国产成人精品免费 | 欧美高清强视频 | 国产成人精品一区二区免费 | 99久久精品国产一区二区小说 | 国产99久久久久久免费看 | 亚洲欧美日韩成人一区在线 | 美女黄色在线网站大全 | 97久久草草超级碰碰碰 | 欧美在线一区二区三区精品 | 91福利精品老师国产自产在线 | a级网站在线观看 | 精品欧美一区二区在线观看 | 国产在线一区二区三区 | 精品欧美一区二区三区在线 | 国产精品日本一区二区在线播放 | 在线黄| 久久久久久久久一次 | 美国免费三片在线观看 | 98国内自拍在线视频 | 97在线看| 手机日韩理论片在线播放 | 99久久香蕉国产线看观香 | 草草视频手机在线观看视频 | 99久久精品国产亚洲 | 亚州免费视频 | 日本国产在线视频 | 草免费视频 | 福利片免费一区二区三区 | 久久久久免费观看 | 中文字幕一区二区三区 精品 | 亚洲依依成人综合在线网址 | 久草在线播放视频 | 日本加勒比在线观看 | 国产末成年女噜噜片 | 最刺激黄a大片免费观看 | 国产精品免费综合一区视频 |