溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這兩天一直糾結angular的圖片懶加載插件中無法自拔。在使用過程深深感到js學藝不精的痛苦，想修改源碼又不會修改，只能盡力壓榨如何使用插件上。這里主要談談在使用插件的過程遇到的一些問題。
一）我使用的是angular-imglazyload這個插件。【https://www.npmjs.com/package/angular-imglazyload】主要是這個插件小不依賴jquery庫，然后下載源碼運行成功后，我就整合到自己項目上運行，結果發現竟然只有前2張加載了，滾動了都沒有反映。下面是我的代碼部分：
<div ng-repeat="Digest in Digest_cont track by $index">
<img src="" data-ui-lazyload="{{Digest.val}}" onerror="this.src='img/default@2x_300X300.png'" ng-if="Digest.type=='img'" alt="">
<div ng-if="Digest.type=='txt'">{{::Digest.val}}</div>
</div>
然后css上定義了loading圖片，加載中會先看到的是在加載過程的圖片
一開始也不知道是什么情況，將循環圖片的html代碼一層一層往上放排查，經過反復查找發現是父父父級class設定的定位：position:absolute;導致了div脫離文檔流導致的。而插件又是根據windows監聽滾動事件的。這里的解決辦法就是把定位改為relative就可以了。
然后是加載過程發現發現不知道為啥loading圖片都沒有出現。出現的一直是onerror定義的默認圖片，一直以為是插件的問題，后來換了個插件使用。發現根源是在src=""這個屬性導致的，渲染的過程認為查找不到圖片就直接顯示默認的圖片了。這里只要刪掉src屬性即可解決。
然后又發現當我某幾張圖片定位到可是區域后，f5刷新瀏覽器，發現一直在加載中，圖片無法顯示出來，只有當我滾動下鼠標，圖片才會加載出來。這個實在不清楚什么原因，我只能選擇另外一個插件使用。
最終的解決方案是使用的這個插件【http://bennadel.github.io/JavaScript-Demos/demos/lazy-src-angularjs/】，發現上面的第三點問題在這里并不存在，果斷使用這個插件，唯一不足是這個需要依賴于jquery庫。這個插件依然是監聽windows滾動事件，無法自定義監聽滾動事件，因此需要注意的是以后的項目上需要懶加載的地方他的父輩元素一定不能是absolute定位。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
