angular實現(xiàn)圖片懶加載實例代碼

更新時間：2017年06月08日 10:59:31 作者：Kagami_Tiger

本篇文章主要介紹了angular實現(xiàn)圖片懶加載實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

這兩天一直糾結(jié)angular的圖片懶加載插件中無法自拔。在使用過程深深感到js學藝不精的痛苦，想修改源碼又不會修改，只能盡力壓榨如何使用插件上。這里主要談談在使用插件的過程遇到的一些問題。

一）我使用的是angular-imglazyload這個插件?！?a target="_blank" rel="external nofollow" >https://www.npmjs.com/package/angular-imglazyload】主要是這個插件小不依賴jquery庫，然后下載源碼運行成功后，我就整合到自己項目上運行，結(jié)果發(fā)現(xiàn)竟然只有前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圖片，加載中會先看到的是在加載過程的圖片

復制代碼代碼如下:

img[data-ui-lazyload]{ background:url(../img/icons/loading.gif) no-repeat center center;}  

一開始也不知道是什么情況，將循環(huán)圖片的html代碼一層一層往上放排查，經(jīng)過反復查找發(fā)現(xiàn)是父父父級class設(shè)定的定位：position:absolute;導致了div脫離文檔流導致的。而插件又是根據(jù)windows監(jiān)聽滾動事件的。這里的解決辦法就是把定位改為relative就可以了。

然后是加載過程發(fā)現(xiàn)發(fā)現(xiàn)不知道為啥loading圖片都沒有出現(xiàn)。出現(xiàn)的一直是onerror定義的默認圖片，一直以為是插件的問題，后來換了個插件使用。發(fā)現(xiàn)根源是在src=""這個屬性導致的，渲染的過程認為查找不到圖片就直接顯示默認的圖片了。這里只要刪掉src屬性即可解決。

然后又發(fā)現(xiàn)當我某幾張圖片定位到可是區(qū)域后，f5刷新瀏覽器，發(fā)現(xiàn)一直在加載中，圖片無法顯示出來，只有當我滾動下鼠標，圖片才會加載出來。這個實在不清楚什么原因，我只能選擇另外一個插件使用。

最終的解決方案是使用的這個插件【http://bennadel.github.io/JavaScript-Demos/demos/lazy-src-angularjs/】，發(fā)現(xiàn)上面的第三點問題在這里并不存在，果斷使用這個插件，唯一不足是這個需要依賴于jquery庫。這個插件依然是監(jiān)聽windows滾動事件，無法自定義監(jiān)聽滾動事件，因此需要注意的是以后的項目上需要懶加載的地方他的父輩元素一定不能是absolute定位。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: