圖片預(yù)加載的原理的不理解

本人新手, 最近在學(xué)習(xí)javascript時對圖片的預(yù)加載問題不是特別理解, 如下:

看了網(wǎng)上的一些博客, 基本上思路是這樣的:

var img = new Image()
img.src = "url"
img.onload = function() {
    callback()
}

先是設(shè)置src來實現(xiàn)預(yù)載, 然后用onload方法回調(diào)預(yù)加載完成事件.

但是到底是怎樣的一個原理我不太理解, 個人暫時的理解是這樣的:

將圖片加載到img對象里面, 這個對象包含了路徑
使用onload判斷是否加載完成

但是我的疑惑在于:

為什么要使用onload事件, 這個事件里面的回調(diào)函數(shù)通常是干什么的
瀏覽器怎么知道圖片加載完成了
網(wǎng)上說是將圖片緩存在瀏覽器, 但是根據(jù)這個代碼我看不出哪里是緩存在了本地, 怎么理解

我自己嘗試了一下, 如果沒有onload事件, 似乎圖片也可以加載, 代碼是這樣的:

var img = new Image()
img.src = 'https://www.gstatic.com/webp/gallery3/2.png'
// img.onload = function() {
    // document.body.appendChild(img)
// }
document.body.appendChild(img)

所以使用onload的意義是在哪里?

問題可能比較蠢, 希望能有前輩給出一個比較詳細的解答, 謝謝了

回答

編輯回答

替身

1.onload 就是圖片加載完成之后，要做的操作。
2.瀏覽器不需要知道圖片有沒有加載完，需要用到圖片的時候，自然會去加載。至于是從緩存中加載，還是從遠端下載，這是瀏覽器要做的事情。而圖片預(yù)加載就是在圖片用到之前，先讓瀏覽器下載到緩存中，這樣用到的時候就不需要下載了。
3.通過js代碼，肯定是不知道圖片緩存在哪里的，因為這個是瀏覽器內(nèi)部做的事情。一般來說瀏覽器會做非常非常多的事情，包括渲染、下載、緩存等等。js代碼所做的事情是在瀏覽器已經(jīng)實現(xiàn)的功能基礎(chǔ)上，再做一點網(wǎng)站功能業(yè)務(wù)上的事情。至于這個功能業(yè)務(wù)用什么語言實現(xiàn)？其實瀏覽器并不在乎，flash、js甚至是其他什么script都行，對瀏覽器來說，不過是加一個執(zhí)行環(huán)境而已。

2017年7月23日 06:59

編輯回答

舊顏

1.onload表示圖片加載完成，回調(diào)的話就看你圖片加載完成后需要什么操作了
2.不知道，這個得看瀏覽器底層原理了
3.比如當(dāng)前網(wǎng)頁，剛進入網(wǎng)頁的時候加載了圖片，然后你重進或者刷新下，就會發(fā)現(xiàn)圖片是從緩存中讀取的

2017年7月2日 06:34

編輯回答

柚稚

就像你寫的

var img = new Image()
img.src = 'https://www.gstatic.com/webp/gallery3/2.png'
document.body.appendChild(img)

這樣的話你考慮一個問題，就是如果這張圖片超級大呢？
這樣直接放上去的話就和 image 標(biāo)簽一樣了，圖片會慢慢的顯示出來
如果這樣改一下

var img = new Image()
img.src = 'https://www.gstatic.com/webp/gallery3/2.png'
img.onload = function() {
    document.body.appendChild(img)
}

那就可以確定這張圖片插入到文檔的時候一定是全部的資源都已經(jīng)下載好了，會直接顯示出來，而不會出現(xiàn)空白的情況。
所以這個事件經(jīng)常用在第一時間還沒在文檔上顯示的圖片，這樣子在用到該圖片的時候，會直接顯示出來。

關(guān)于緩存的話就是瀏覽器如果連續(xù)幾次請求同一次資源只會發(fā)出一次請求，而之后的所有請求都會直接拿第一次請求到的資源(前提是資源沒變)

2018年8月15日 07:56

編輯回答

誮惜顏

所謂預(yù)加載就是提前加載，這個沒問題吧？
核心原理是瀏覽器請求過的資源會自動緩存。那你用js創(chuàng)建一個看不見的Image標(biāo)簽，瀏覽器會發(fā)出請求，這個過程用戶是看不到了。到了頁面上真正要顯示這張圖片的時候，瀏覽器一檢查，哎，原來緩存過來，那就不下載了，直接顯示，給用戶的感覺就是秒加載了