国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 21:44:45
字體:
供稿:網(wǎng)友

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

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

  功能很簡單,但是很蛋疼的是,我沒完全做出來;

  在做的時候,第一時間我自然想到了如下的方法:
  

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

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

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

接著找了一下資料,發(fā)現(xiàn)上面說是緩存的原因,因?yàn)閘oad加載的時候有限瀏覽器會因?yàn)榫彺娌粫|發(fā)load事件;沒果;我就發(fā)了一個狠招:

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

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

};

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

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

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

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

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

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

經(jīng)過改正,也沒跟老大說就傳了上去;這次我也不敢大意,就一直在測,這一測就測出不是問題的問題了;

  因?yàn)轫撁婕虞d的時候圖片路徑每次都會不同,所以每次都會去加載,消耗的時間跟第一次加載等同;那不就是說進(jìn)入一次就要加載一次嗎?

  我暈.........

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

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

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

這樣就可以解決掉圖片緩存了,還是會觸發(fā)load事件;雖然我還不是具體理解這個;不過聽別人說,這還是因?yàn)轫撁婕虞d的原因;

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

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

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

發(fā)表評論 共有條評論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 许昌县| 苏尼特右旗| 察隅县| 临沧市| 贞丰县| 碌曲县| 手游| 天水市| 尼玛县| 广东省| 乌拉特中旗| 南华县| 滨海县| 贡嘎县| 梁平县| 乐至县| 沙雅县| 宜州市| 南部县| 吉安市| 恩施市| 会理县| 栾川县| 屯昌县| 天峻县| 界首市| 讷河市| 轮台县| 青岛市| 明星| 安化县| 藁城市| 邵东县| 都匀市| 醴陵市| 湖南省| 朔州市| 渝北区| 临泉县| 武安市| 图片|