js 一個關於圖片onload加載的事

       前幾天一個項目讓我頭疼了好久，一個關於圖片加載時的loading效果，由於不是太懂js，因此在網上各類找資料，但仍是不理想，無賴苦心研究，終於有了一點眉目了，雖然箇中還有一些道理不懂，至少目的達到了;

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

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

　　功能很簡單，可是很蛋疼的是，我沒徹底作出來；

　　在作的時候，第一時間我天然想到了以下的方法：

　　

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

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

　　接着找了一下資料，發現上面說是緩存的緣由，由於load加載的時候有限瀏覽器會由於緩存不會觸發load事件;沒果；我就發了一個狠招：

　　

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

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

　　無奈，我就只能各類壓縮圖片呀，壓完以後，他仍是以爲不太理想；老大說這樣能夠了，如今項目還只是扔在空間上，這空間原本很慢，若是他網速慢，加載的時間天然也慢了。

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

 　　

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

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

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

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

　　我暈.........

　　通過數十次的嘗試，苦逼的我，終於找到了一個完敗上面全部方法的辦法 了：

　　

function imgloading(){
    console.log('已經加載')
}

//頁面調用
<img src="1.jpg" onload="imgloading();"/>

　　這樣就能夠解決掉圖片緩存了，仍是會觸發load事件；雖然我還不是具體理解這個；不過聽別人說，這仍是由於頁面加載的緣由；

　　衆所周知網頁是從上往下加載的；當加載到img的時候，我在ready裏面獲取img 元素實際上是取不到的；當頁面繼續往下加載，通過img以後，當前的img就表明加載完畢了，既然加載完畢，我想都加載了，介個load還有用嗎？

　　而上述的方法不難看出，頁面仔加載到img 的時候碰到了onload方法，它就知道了這個圖片必需要加載以後纔出現。

　　好了。。。不知道有沒有同行遇到了本苦逼這樣的事情，是否找到了比這個更加完美的解決方案。。若是你有更完美的辦法，請必定要留言告知呀，萬分感謝，我總感受仍是有更加好的方法的。。。