快捷導(dǎo)航

js 一個(gè)關(guān)于圖片onload加載的事

更新時(shí)間：2013年11月10日 11:42:51 投稿：mdxy-dxy

前幾天一個(gè)項(xiàng)目讓我頭疼了很久，一個(gè)關(guān)于圖片加載時(shí)的loading效果，因?yàn)椴皇翘甹s，所以在網(wǎng)上各種找資料，但還是不理想，無(wú)賴苦心研究，終于有了一點(diǎn)眉目了，雖然個(gè)中還有一些道理不懂，至少目的達(dá)到了

首先先明確一下我要的目的：

　　當(dāng)用戶進(jìn)入頁(yè)面的時(shí)候，顯示loading 加載圖標(biāo)，等最大的圖片加載之后再opacity 圖片;

　　功能很簡(jiǎn)單，但是我沒(méi)完全做出來(lái)；

　　在做的時(shí)候，第一時(shí)間我自然想到了如下的方法：
　　

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

$(function(){
    $('.banner img').load(function(){
        console.log('已經(jīng)加載')   
    });
});

熟話說(shuō)的好呀，自信心太膨脹，到頭來(lái)打擊很大了；我以為這樣就可以了，然后看了一遍之后拿給老大，老大點(diǎn)了兩下，說(shuō)一直不加載出來(lái)了，loading 轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)的就是出不來(lái)，我說(shuō)不應(yīng)該呀，然后自己試一下，果真如此。

接著找了一下資料，發(fā)現(xiàn)上面說(shuō)是緩存的原因，因?yàn)閘oad加載的時(shí)候有限瀏覽器會(huì)因?yàn)榫彺娌粫?huì)觸發(fā)load事件;沒(méi)果；我就發(fā)了一個(gè)狠招：

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

window.onload=function(){
    console.log('已經(jīng)加載')
   
};

嘿嘿，這樣還不行，我頂你個(gè)肺了；然后自信心又彭臟了，拿給老大，老大說(shuō)行，第二天，客戶來(lái)電說(shuō)頁(yè)面不加載，一個(gè)loading一直轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)的；我無(wú)語(yǔ)的回答他說(shuō):應(yīng)該是你們那網(wǎng)速太慢了。。。你在等等，過(guò)了一下他答：說(shuō)這樣不行，雖然出來(lái)了，但等太久了；能不能讓時(shí)間稍微少一點(diǎn)；

　　無(wú)奈，我就只能各種壓縮圖片呀，壓完之后，他還是覺(jué)得不太理想；老大說(shuō)這樣可以了，現(xiàn)在項(xiàng)目還只是扔在空間上，這空間本來(lái)很慢，如果他網(wǎng)速慢，加載的時(shí)間自然也慢了。

　　老大說(shuō)是這樣說(shuō)呀，任務(wù)還是沒(méi)完成啊，絞盡腦汁，偶然看到一個(gè)外國(guó)網(wǎng)站的輪播圖jq 插件,我下下來(lái)看了一下源碼，接著就誕生出了以下招數(shù)：

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

var oImg = $('.banner img:eq(0)');
    oImg.attr('src')+'?'+(new Date()).getTime();
    oImg.load(function(){
        console.log('已經(jīng)加載')   
    });

　　經(jīng)過(guò)測(cè)試很正常，這個(gè)意思就是，在進(jìn)入頁(yè)面的時(shí)候，把圖片的地址加一個(gè)時(shí)間，這樣每次加載的時(shí)候就不會(huì)有緩存;而且也只是加載一張圖,一張加載完之后其他就不管；

經(jīng)過(guò)改正，也沒(méi)跟老大說(shuō)就傳了上去；這次我也不敢大意，就一直在測(cè)，這一測(cè)就測(cè)出不是問(wèn)題的問(wèn)題了；

　　因?yàn)轫?yè)面加載的時(shí)候圖片路徑每次都會(huì)不同，所以每次都會(huì)去加載，消耗的時(shí)間跟第一次加載等同；那不就是說(shuō)進(jìn)入一次就要加載一次嗎？

　　我暈.........

　　經(jīng)過(guò)數(shù)十次的嘗試，苦逼的我，終于找到了一個(gè)完敗上面所有方法的辦法了：

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

function imgloading(){
    console.log('已經(jīng)加載')
}
//頁(yè)面調(diào)用
<img src="1.jpg" onload="imgloading();"/>

這樣就可以解決掉圖片緩存了，還是會(huì)觸發(fā)load事件；雖然我還不是具體理解這個(gè)；不過(guò)聽(tīng)別人說(shuō)，這還是因?yàn)轫?yè)面加載的原因；

眾所周知網(wǎng)頁(yè)是從上往下加載的；當(dāng)加載到img的時(shí)候，我在ready里面獲取img 元素其實(shí)是取不到的；當(dāng)頁(yè)面繼續(xù)往下加載，經(jīng)過(guò)img之后，當(dāng)前的img就代表加載完畢了，既然加載完畢，我想都加載了，介個(gè)load還有用嗎？

而上述的方法不難看出，頁(yè)面仔加載到img 的時(shí)候碰到了onload方法，它就知道了這個(gè)圖片必須要加載之后才出現(xiàn)。

好了。。。不知道有沒(méi)有同行遇到了本苦逼這樣的事情，是否找到了比這個(gè)更加完美的解決方案。。如果你有更完美的辦法，請(qǐng)一定要留言告知呀，萬(wàn)分感謝，我總感覺(jué)還是有更加好的方法的。。。