js 一個關於圖片onload載入的事_javascript技巧

 先先釐清我要的目的：

　　當使用者進入頁面的時候，顯示loading 載入圖標，等最大的圖片載入之後再opacity 圖片;

　　功能很簡單，但是很頭痛的是，我沒完全做出來；

　　在做的時候，第一時間我自然想到瞭如下的方法：
　　

複製代碼 代碼如下:

$(function(){
    $('.banner img').load(function(){
     );
});

熟話說的好呀，自信心太膨脹，到頭來打擊很大了；我以為這樣就可以了，然後看了一遍之後拿給老大，老大點了兩下，說一直不加載出來了，loading 轉轉轉的就是出不來，我說不應該呀，然後自己試一下，果真如此。

接著找了一下資料，發現上面說是快取的原因，因為load載入的時候有限瀏覽器會因為快取不會觸發load事件;沒果；我就發了一個狠招：

複製程式碼 程式碼如下:

window.onload=function(>

window.onload=function(>

window.onload=function(>

window.onload=function(> con .log('已經載入')

};

嘿嘿，這樣還不行，我頂你個肺了；然後自信又彭髒了，拿給老大，老大說行，第二天，客戶來電說頁面不加載，一個loading一直轉轉轉的；我無語的回答他說:應該是你們那網速太慢了。 。 。你在等等，過了一下他答：說這樣不行，雖然出來了，但等太久了；能不能讓時間稍微少一點；

　　無奈，我就只能各種壓縮圖片呀，壓完之後，他還是覺得不太理想；老大說這樣可以了，現在項目還只是扔在空間上，這空間本來很慢，如果他網速慢，載入的時間自然也慢了。

　　老大說是這樣說呀，任務還是沒完成啊，絞盡腦汁，偶然看到一個外國網站的輪播圖jq 插件,我下下來看了一下源碼，接著就誕生出了以下招數：

複製程式碼

程式碼如下:


var oImg = $('.banner img:eq( 0)');
    oImg.attr('src') '?' (new Date()).getTime();

    oImg.load(function(){ '已經    oImg.load(function(){

 '已經    oImg.載')   

    });

　　經過測試很正常，這個意思就是，在進入頁面的時候，把圖片的地址加一個時間，這樣每次加載的時候就不會有緩存;而且也只是加載一張圖,一張加載完之後其他就不管；

經過改正，也沒跟老大說就傳了上去；這次我也不敢大意，就一直在測，這一測就測出不是問題的問題了；

　　因為頁面加載的時候圖片路徑每次都會不同，所以每次都會去加載，消耗的時間跟第一次加載等同；那不就是說進入一次就要加載一次嗎？

　　我暈......... 　　經過數十次的嘗試，苦逼的我，終於找到了一個完敗上面所有方法的辦法 了：

複製碼


程式碼如下:


function imgloading(){

'已經載入')}

//頁呼叫

這樣就可以解決掉圖片快取了，還是會觸發load事件；雖然我還不是具體理解這個；不過聽別人說，這還是因為頁面載入的原因；

眾所周知網頁是從上往下加載的；當加載到img的時候，我在ready裡面獲取img 元素其實是取不到的；當頁面繼續往下加載，經過img之後，當前的img就代表加載完畢了，既然加載完畢，我想都加載了，介個load還有用嗎？ 而上述的方法不難看出，頁面仔加載到img 的時候碰到了onload方法，它就知道了這個圖片必須要加載之後才出現。 好了。 。 。不知道有沒有同行遇到了本苦逼這樣的事情，是否找到了比這個更完美的解決方案。 。如果你有更完美的辦法，請一定要留言告知呀，萬分感謝，我總感覺還是有更加好的方法的。 。 。