js 一個關于圖片onload加載的事
首先先明確一下我要的目的：
當用戶進入頁面的時候，顯示loading 加載圖標，等最大的圖片加載之后再opacity 圖片;
功能很簡單，但是我沒完全做出來；
在做的時候，第一時間我自然想到了如下的方法：
$(function(){
$('.banner img').load(function(){
console.log('已經(jīng)加載')
});
});
熟話說的好呀，自信心太膨脹，到頭來打擊很大了；我以為這樣就可以了，然后看了一遍之后拿給老大，老大點了兩下，說一直不加載出來了，loading 轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)的就是出不來，我說不應該呀，然后自己試一下，果真如此。
接著找了一下資料，發(fā)現(xiàn)上面說是緩存的原因，因為load加載的時候有限瀏覽器會因為緩存不會觸發(fā)load事件;沒果；我就發(fā)了一個狠招：
window.onload=function(){
console.log('已經(jīng)加載')
};
嘿嘿，這樣還不行，我頂你個肺了；然后自信心又彭臟了，拿給老大，老大說行，第二天，客戶來電說頁面不加載，一個loading一直轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)的；我無語的回答他說:應該是你們那網(wǎng)速太慢了。。。你在等等，過了一下他答：說這樣不行，雖然出來了，但等太久了；能不能讓時間稍微少一點；
無奈，我就只能各種壓縮圖片呀，壓完之后，他還是覺得不太理想；老大說這樣可以了，現(xiàn)在項目還只是扔在空間上，這空間本來很慢，如果他網(wǎng)速慢，加載的時間自然也慢了。
老大說是這樣說呀，任務還是沒完成啊，絞盡腦汁，偶然看到一個外國網(wǎng)站的輪播圖jq 插件,我下下來看了一下源碼，接著就誕生出了以下招數(shù)：
var oImg = $('.banner img:eq(0)');
oImg.attr('src')+'?'+(new Date()).getTime();
oImg.load(function(){
console.log('已經(jīng)加載')
});
經(jīng)過測試很正常，這個意思就是，在進入頁面的時候，把圖片的地址加一個時間，這樣每次加載的時候就不會有緩存;而且也只是加載一張圖,一張加載完之后其他就不管；
經(jīng)過改正，也沒跟老大說就傳了上去；這次我也不敢大意，就一直在測，這一測就測出不是問題的問題了；
因為頁面加載的時候圖片路徑每次都會不同，所以每次都會去加載，消耗的時間跟第一次加載等同；那不就是說進入一次就要加載一次嗎？
我暈.........
經(jīng)過數(shù)十次的嘗試，苦逼的我，終于找到了一個完敗上面所有方法的辦法 了：
function imgloading(){
console.log('已經(jīng)加載')
}
//頁面調(diào)用
<img src="1.jpg" onload="imgloading();"/>
這樣就可以解決掉圖片緩存了，還是會觸發(fā)load事件；雖然我還不是具體理解這個；不過聽別人說，這還是因為頁面加載的原因；
眾所周知網(wǎng)頁是從上往下加載的；當加載到img的時候，我在ready里面獲取img 元素其實是取不到的；當頁面繼續(xù)往下加載，經(jīng)過img之后，當前的img就代表加載完畢了，既然加載完畢，我想都加載了，介個load還有用嗎？
而上述的方法不難看出，頁面仔加載到img 的時候碰到了onload方法，它就知道了這個圖片必須要加載之后才出現(xiàn)。
好了。。。不知道有沒有同行遇到了本苦逼這樣的事情，是否找到了比這個更加完美的解決方案。。如果你有更完美的辦法，請一定要留言告知呀，萬分感謝，我總感覺還是有更加好的方法的。。。
相關文章
javascript 設為首頁與加入收藏兼容多瀏覽器代碼,不過由于ie7的特殊性，設為首頁不能使用，不過其它基于ie內(nèi)核的瀏覽器都是支持的。2011-01-01
這篇文章主要介紹了JS實現(xiàn)的幻燈片切換顯示效果,涉及javascript通過擴展實現(xiàn)針對頁面元素的動態(tài)切換操作相關技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了js 閉包,結(jié)合實例形式深入分析了JS閉包的概念、原理、使用方法與操作注意事項,需要的朋友可以參考下2020-03-03
Bootstrap 4是一次重大更新，幾乎涉及每行代碼，這篇文章為大家分享了Bootstrap 4.0重大更新及亮點詳細解讀，感興趣的小伙伴們可以參考一下2016-05-05
js 無提示關閉瀏覽器頁面的代碼與函數(shù)需要的朋友可以參考下。2010-03-03
js表單元素checked、radio被選中的幾種方法(詳解)
下面小編就為大家?guī)硪黄猨s表單元素checked、radio被選中的幾種方法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
有的時候頁面需要很多不同的表組成的數(shù)據(jù)，該怎么分頁呢？使用數(shù)據(jù)庫分頁很簡單，那么如何使用js實現(xiàn)分頁呢？接下來，小編幫大家解決這個問題，需要的朋友一起來學習吧2015-08-08
Javascript中函數(shù)分類&this指向的實例詳解
其實想要徹底理解js中this的指向，不必硬背，這篇文章主要給大家介紹了關于Javascript中函數(shù)分類&this指向的相關資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了JavaScript 解析數(shù)學表達式的過程詳解,本文以一個的解題思路，來分享如何解決問題，解決的過程，可以作為解決工作中一般問題的通用思路，對js解析表達式相關知識感興趣的朋友一起看看吧2022-06-06
在IE8的新特性里，提到了會支持querySelector()和querySelectorAll()方法，如何使用這里就不說了，只是記錄下我在使用時遇到一個問題。2010-05-05