图片预加载的原理的不理解

Question

本人新手, 最近在学习javascript时对图片的预加载问题不是特别理解, 如下:

看了网上的一些博客, 基本上思路是这样的:

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

先是设置src来实现预载, 然后用onload方法回调预加载完成事件.

但是到底是怎样的一个原理我不太理解, 个人暂时的理解是这样的:

1. 将图片加载到img对象里面, 这个对象包含了路径
2. 使用onload判断是否加载完成

但是我的疑惑在于:

1. 为什么要使用onload事件, 这个事件里面的回调函数通常是干什么的
2. 浏览器怎么知道图片加载完成了
3. 网上说是将图片缓存在浏览器, 但是根据这个代码我看不出哪里是缓存在了本地, 怎么理解

我自己尝试了一下, 如果没有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的意义是在哪里?

问题可能比较蠢, 希望能有前辈给出一个比较详细的解答, 谢谢了

Answer 1

所谓预加载就是提前加载，这个没问题吧？
核心原理是浏览器请求过的资源会自动缓存。那你用js创建一个看不见的Image标签，浏览器会发出请求，这个过程用户是看不到了。到了页面上真正要显示这张图片的时候，浏览器一检查，哎，原来缓存过来，那就不下载了，直接显示，给用户的感觉就是秒加载了

1. onload事件是加载成功，这个callback写不写无所谓
2. 浏览器不需要知道图片加载完成了
3. 原理说过了

Answer 2

1.onload表示图片加载完成，回调的话就看你图片加载完成后需要什么操作了
2.不知道，这个得看浏览器底层原理了
3.比如当前网页，刚进入网页的时候加载了图片，然后你重进或者刷新下，就会发现图片是从缓存中读取的

Answer 3

就像你写的

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)
}

那就可以确定这张图片插入到文档的时候一定是全部的资源都已经下载好了，会直接显示出来，而不会出现空白的情况。
所以这个事件经常用在第一时间还没在文档上显示的图片，这样子在用到该图片的时候，会直接显示出来。

关于缓存的话就是浏览器如果连续几次请求同一次资源只会发出一次请求，而之后的所有请求都会直接拿第一次请求到的资源(前提是资源没变)

Answer 4

1.onload 就是图片加载完成之后，要做的操作。
2.浏览器不需要知道图片有没有加载完，需要用到图片的时候，自然会去加载。至于是从缓存中加载，还是从远端下载，这是浏览器要做的事情。而图片预加载就是在图片用到之前，先让浏览器下载到缓存中，这样用到的时候就不需要下载了。
3.通过js代码，肯定是不知道图片缓存在哪里的，因为这个是浏览器内部做的事情。一般来说浏览器会做非常非常多的事情，包括渲染、下载、缓存等等。js代码所做的事情是在浏览器已经实现的功能基础上，再做一点网站功能业务上的事情。至于这个功能业务用什么语言实现？其实浏览器并不在乎，flash、js甚至是其他什么script都行，对浏览器来说，不过是加一个执行环境而已。