圖片預加載的原理的不理解

本人新手, 最近在學習javascript時對圖片的預加載問題不是特別理解, 如下:

看了網上的一些博客, 基本上思路是這樣的:

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

先是設置src來實現預載, 然后用onload方法回調預加載完成事件.

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

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

但是我的疑惑在于:

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

我自己嘗試了一下, 如果沒有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.瀏覽器不需要知道圖片有沒有加載完，需要用到圖片的時候，自然會去加載。至于是從緩存中加載，還是從遠端下載，這是瀏覽器要做的事情。而圖片預加載就是在圖片用到之前，先讓瀏覽器下載到緩存中，這樣用到的時候就不需要下載了。
3.通過js代碼，肯定是不知道圖片緩存在哪里的，因為這個是瀏覽器內部做的事情。一般來說瀏覽器會做非常非常多的事情，包括渲染、下載、緩存等等。js代碼所做的事情是在瀏覽器已經實現的功能基礎上，再做一點網站功能業(yè)務上的事情。至于這個功能業(yè)務用什么語言實現？其實瀏覽器并不在乎，flash、js甚至是其他什么script都行，對瀏覽器來說，不過是加一個執(zhí)行環(huán)境而已。

2017年7月23日 06:59

編輯回答

舊顏

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

2017年7月2日 06:34

編輯回答

柚稚

就像你寫的

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

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

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

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

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

2018年8月15日 07:56

編輯回答

誮惜顏

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