首頁猿問 javascript...

javascript Image的onload 方法的使用

JavaScript

慕妹3146593 2018-09-10 18:10:45

var img = new Image();img.onload =function () { $('.bg').css('background-image', 'url("'+img.src+'")');}img.src="images/bg.jpg";添加背景圖片這樣的寫法是否正確？為什么onload方法要在src之前調(diào)用？

查看完整描述

1 回答

犯罪嫌疑人X

TA貢獻(xiàn)2080條經(jīng)驗獲得超4個贊

因為當(dāng)image的src發(fā)生改變，瀏覽器就會跑去加載這個src里的資源。這個操作是異步的，就是說，js不會傻傻地在原地等待圖片的加載，而是繼續(xù)讀代碼，直到圖片加載完成，觸發(fā)onload事件，js才會回來執(zhí)行onload里面的內(nèi)容。
那么問題來了，假如你家的網(wǎng)速好到爆，比光速還快，或者圖片超級小，反正就是，當(dāng)圖片加載的速度快于js解釋器閱讀代碼的速度，然后你的onload是寫在.src后面，瀏覽器還沒讀onload里面的全部內(nèi)容就觸發(fā)了onload事件。。。這就很尷尬了，瀏覽器根本不知道接下來要做什么，索性就什么都不做。。。所以onload要先寫在.src前面，就是先告訴瀏覽器：待會要是onload，你就執(zhí)行這些這些，知道了嗎？好了，我要放src了，記得onload的時候執(zhí)行函數(shù)?。?/p>

1 反對回復(fù) 2018-10-09