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

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

<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圖片，加載中會(huì)先看到的是在加載過(guò)程的圖片

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

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

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

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

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

最新評(píng)論