快捷導(dǎo)航

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

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

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

這兩天一直糾結(jié)angular的圖片懶加載插件中無法自拔。在使用過程深深感到j(luò)s學(xué)藝不精的痛苦，想修改源碼又不會修改，只能盡力壓榨如何使用插件上。這里主要談?wù)勗谑褂貌寮倪^程遇到的一些問題。

一）我使用的是angular-imglazyload這個(gè)插件?！?a target="_blank" rel="external nofollow" >https://www.npmjs.com/package/angular-imglazyload】主要是這個(gè)插件小不依賴jquery庫，然后下載源碼運(yùn)行成功后，我就整合到自己項(xiàng)目上運(yùn)行，結(jié)果發(fā)現(xiàn)竟然只有前2張加載了，滾動(dòng)了都沒有反映。下面是我的代碼部分：

<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圖片，加載中會先看到的是在加載過程的圖片

復(fù)制代碼代碼如下:

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

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

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

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

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

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

您可能感興趣的文章: