在知道lazyload插件之后，我的任務(wù)是延遲加載banner墩瞳，首先想都沒(méi)有想就要直接用插件（有現(xiàn)成的不用非要自己寫(xiě)那不是傻嗎）驼壶，果斷去了解插件怎么使用，按照人家的demo喉酌，依著葫蘆畫(huà)瓢热凹，也沒(méi)有繼續(xù)往下看文檔。發(fā)現(xiàn)自己的代碼原來(lái)不是img標(biāo)簽泪电，而是div的background-image 般妙，后來(lái)發(fā)現(xiàn)lazyload中用到的load事件根本不能用在div上，只能用在適用于任何帶有 URL 的元素（比如圖像相速、腳本碟渺、框架、內(nèi)聯(lián)框架）突诬，所以苫拍，為了實(shí)現(xiàn)效果，果斷將原來(lái)的div換成了img 旺隙，欣喜的完成之后绒极，才發(fā)現(xiàn)，瀏覽器的窗口變化banner的圖片就會(huì)被拉伸或者壓縮蔬捷，這果斷不符合要求垄提，結(jié)果就是Try again。

又將原來(lái)的代碼還原，再次自己閱讀人家lazyload的文檔塔淤，發(fā)現(xiàn)摘昌，人家的插件是支持用div的banckground-image的，于是果斷再次照著葫蘆畫(huà)瓢高蜂，代碼是完成了聪黎，但是效果卻沒(méi)有實(shí)現(xiàn)，后來(lái)才發(fā)現(xiàn)备恤，原來(lái)是lazyload和bootstrap的carousel插件起了沖突稿饰，無(wú)奈，不能改原來(lái)的代碼露泊，沒(méi)有別的部分就會(huì)收到影響喉镰，于是就開(kāi)始各種嘗試，將lazyload的class為lazy的div放進(jìn)carousel插件的class為item的div內(nèi)部惭笑，結(jié)果簡(jiǎn)直就是驚喜侣姆，效果看起來(lái)是實(shí)現(xiàn)了。于是就屁顛屁顛的上交自己的作品沉噩，讓老大檢查捺宗。結(jié)果就是再次被駁回，因?yàn)椴环闲枨蟠桑枨笫莾?yōu)先加載第一屏蚜厉，讓頁(yè)面剛打開(kāi)的時(shí)候就能很快的完全顯示，而自己做的是在頁(yè)面加載完成之后才開(kāi)始加載的banner畜眨。于是又是Try again昼牛。

再次理解了需求之后，這次要求不用插件康聂，而是自己寫(xiě)代碼贰健。好吧，既然要自己寫(xiě)恬汁，就要在使用了carousel的前提下理清思路再開(kāi)工伶椿。于是就將自己的思路寫(xiě)在紙上，沒(méi)辦法蕊连，都怪自己的空間邏輯思維能力不夠用啊，所有只能借助紙筆了游昼。首先甘苍，banner加載的時(shí)機(jī)就是carousel的滾動(dòng)，而自己不能修改carousel.js烘豌，不能讓它再出發(fā)滾動(dòng)的時(shí)候就加載banner载庭，但是滾動(dòng)的觸發(fā)對(duì)于代碼的變化就是動(dòng)態(tài)的給div移除和添加active 類，于是我就想只要是js操作active類的div以及它的下一個(gè)div加載圖片就可以了，其他的div就不加載background-image囚聚。按照這個(gè)思路寫(xiě)好之寫(xiě)好之后靖榕，發(fā)現(xiàn)第一張和第二張banner已經(jīng)加載好了，但是js只是執(zhí)行了一遍顽铸，如何讓它持續(xù)的檢測(cè)active類并執(zhí)行將data-original轉(zhuǎn)換成background-image呢茁计，于是就想到了setTimeout()和clearTimeout(),于是將data-original轉(zhuǎn)換成background-image 的代碼封裝成函數(shù)用setTimeout()調(diào)用，我以為的效果是實(shí)現(xiàn)了谓松，但是開(kāi)銷太大了星压，因?yàn)橐煌５膱?zhí)行那段js，就算第一張已經(jīng)將data-original轉(zhuǎn)換成了background-image了之后還是會(huì)再次執(zhí)行鬼譬，于是我就在想clearTimeout的時(shí)機(jī)娜膘，就在active類的那個(gè)div和下一個(gè)div轉(zhuǎn)換好之后就clearTimeout，但是問(wèn)題又來(lái)了优质，使用了clearTimeout之后就真的結(jié)束了竣贪，就不會(huì)再次啟動(dòng)了，后面的banner還沒(méi)有加載出來(lái)巩螃，怎么辦呢演怎？于是我又想有什么事件可以觸發(fā)，然后執(zhí)行setTimeout牺六，為了找到這個(gè)我真的是絞盡腦汁啊 颤枪，發(fā)現(xiàn)可以給輪播的那個(gè)小圓點(diǎn)添加click事件，這樣在點(diǎn)擊小圓點(diǎn)的時(shí)候就不會(huì)加載不出來(lái)圖片淑际，我就給li添加了click事件畏纲，點(diǎn)擊小圓點(diǎn)觸發(fā)執(zhí)行setTimeout然后加載banner實(shí)現(xiàn)了，但是自動(dòng)輪播的那個(gè)還是沒(méi)有實(shí)現(xiàn)春缕，怎么辦呢盗胀？于是，再次開(kāi)始絞盡腦汁锄贼，估計(jì)我的腦細(xì)胞真的是已經(jīng)死傷無(wú)數(shù)了票灰，但是又不能說(shuō)自己做不出來(lái)，便開(kāi)始了研究carousel 的文檔宅荤，希望能夠從中找到突破點(diǎn)屑迂，結(jié)果，皇天不負(fù)有心人啊冯键，真的讓我找到了惹盼，slide.bs.carousel事件，bootstrap上的描述是當(dāng)調(diào)用 slide 實(shí)例方法時(shí)立即觸發(fā)該事件惫确，我一想手报，這不就是我一直苦苦追尋的嗎蚯舱？當(dāng)然，答案是肯定的 掩蛤。并且有了它之后我也不用在給小圓點(diǎn)上綁定事件了枉昏，也不用什么setTimeout了，這次真的是欣喜若狂揍鸟，估計(jì)就和范進(jìn)中舉的心情是一樣的兄裂，只不過(guò)我沒(méi)有瘋而已。這次的效果和我想要實(shí)現(xiàn)的效果是一樣的蜈亩，頓時(shí)懦窘，這么多天一直懸著的心終于落下了，不過(guò)事實(shí)證明我高興的太早了稚配。我將自己的成果給老大看畅涂，老大同樣的問(wèn)題問(wèn)了我三遍，banner加載優(yōu)化的需求是什么道川，目的是什么午衰？當(dāng)聽(tīng)到這句話的時(shí)候我簡(jiǎn)直蒙了，難道我的語(yǔ)文水平已經(jīng)退化到幼兒園的地步了冒萄？臊岸，我又將我上面描述的說(shuō)了一遍，都說(shuō)再一再二不能再三尊流，可是我帅戒。。崖技。逻住。多謝老大耐心的指導(dǎo)，感激不盡坝住瞎访！遇到這樣的小弟也是悲催啊。

經(jīng)過(guò)指點(diǎn)吁恍，我發(fā)現(xiàn)我做的所有的效果都是在頁(yè)面加載之后才加載的banner 扒秸。當(dāng)時(shí)想的是js在頁(yè)面的后面，按照瀏覽器的加載順序冀瓦，怎么著寫(xiě)js都是先加載頁(yè)面后加載banner伴奥。我不知所措，請(qǐng)求指點(diǎn)翼闽，老大讓我看了他做的拾徙，對(duì)比了線上的和自己的。我簡(jiǎn)直說(shuō)不出話了肄程，原來(lái)自己一直都在一個(gè)誤區(qū)里锣吼，自己以為的延時(shí)加載就是要延遲將data-original 轉(zhuǎn)換成background-image，而自己一直在做的工作同樣也是這個(gè)蓝厌，所以banner總是在頁(yè)面加載完成之后在加載玄叠。

我原來(lái)沒(méi)有覺(jué)得學(xué)習(xí)一項(xiàng)新的東西那么痛苦，我現(xiàn)在到了簡(jiǎn)直是要抓狂的節(jié)奏拓提，難道是我原來(lái)學(xué)的東西都是不求甚解读恃，所以才覺(jué)得簡(jiǎn)單？可能我原來(lái)只停留在會(huì)用的層面上代态，但是寺惫，對(duì)于現(xiàn)在的我來(lái)說(shuō)會(huì)用根本不行。但是我還不能夠放棄蹦疑，當(dāng)然一方面是因?yàn)槲椰F(xiàn)在還要吃飯?zhí)铒柖亲游魅福疫€沒(méi)有達(dá)到羽化成仙的境界；另一方面是因?yàn)槲也幌胍院筮€過(guò)著這樣的日子歉摧。有時(shí)候我再想是不是其他行業(yè)就沒(méi)有那么困難艇肴，我每次都在掙扎，可是我在想如果其他的行業(yè)也是這樣的怎么辦呢叁温？難道我又要放棄再換其他的行業(yè)再悼？那樣的話我豈不是一事無(wú)成。有時(shí)候感到很委屈膝但，莫名其妙的感覺(jué)委屈冲九，不對(duì)，不應(yīng)該說(shuō)是委屈跟束，是因?yàn)樽约簩W(xué)不會(huì)而感覺(jué)自己很笨莺奸，自己跟自己生悶氣的感覺(jué)。即使是這樣泳炉，同樣要每天沒(méi)心沒(méi)肺的開(kāi)懷大笑憾筏。就權(quán)當(dāng)是發(fā)泄一下嘍。

剛看到指派的任務(wù)是lazy加載花鹅，當(dāng)時(shí)并不知道這是什么東西氧腰，結(jié)果百度了一下，原來(lái)lazyLoad是一款插件刨肃，當(dāng)時(shí)略微看了這款插件之后古拴，就覺(jué)得這款插件應(yīng)該應(yīng)用于那種大量使用圖片的網(wǎng)站，像淘寶啦 蘑菇街啦 美麗說(shuō)啦之類的真友，當(dāng)然黄痪，人家那些網(wǎng)站已經(jīng)不屑于用這種小插件了，人家用的本身就是高大上的流式布局盔然，但我實(shí)在是沒(méi)有想到我們網(wǎng)站的首頁(yè)的banner加載還要延時(shí)加載桅打，瞬間有一種殺雞用了牛刀的感覺(jué)是嗜。經(jīng)過(guò)仔細(xì)的了解之后才明白圖片加載還是很容易拖慢頁(yè)面加載的進(jìn)度的，或者這種拖慢在某種網(wǎng)速下看不出來(lái)挺尾，但是在網(wǎng)速比較差鹅搪，或者信號(hào)不是很好的情況下就很明顯。這才發(fā)現(xiàn)遭铺，原來(lái)老大一直都是在精益求精丽柿，而自己竟然有這種“差不多就可以了”觀念，或許對(duì)于大多數(shù)人一開(kāi)始都會(huì)有這種觀點(diǎn)魂挂，后來(lái)人家經(jīng)過(guò)脫變（我覺(jué)得是被逼的）甫题，成就了精益求精。同樣涂召，我也是被逼的坠非，簡(jiǎn)直到了抓狂的地步，然后感慨一句果正，書(shū)到用時(shí)方恨少啊麻顶。

對(duì)比完之后瞬間感覺(jué)自己就像那個(gè)豬一樣的隊(duì)友，但是舱卡，蠢只是借口辅肾，不是原因。真正的原因是自己太屬于行動(dòng)派了轮锥，拿到任務(wù)就蒙著頭開(kāi)始干矫钓，缺少理性的分析，沒(méi)有真正的理解就開(kāi)始動(dòng)手舍杜；第二就是自己太浮躁了新娜，學(xué)東西還是留在表面，沒(méi)有深入理解就開(kāi)始使用既绩，并以為自己會(huì)用就算是會(huì)了概龄；第三，看東西不仔細(xì)饲握，經(jīng)常忽略掉一些東西私杜。像我這種急性子的人，難道這就是傳說(shuō)中的性格缺陷救欧？原來(lái)一直以為那些自己才是最大的敵人衰粹，戰(zhàn)勝自己才是成功之類的話只是高談闊論，原來(lái)是真的笆怠。

那問(wèn)題又來(lái)了铝耻，我該怎么做呢？或許這個(gè)東西還真的得靠我自己蹬刷。