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

Question

本人新手, 最近在学习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的意义是在哪里?问题可能比较蠢, 希望能有前辈给出一个比较详细的解答, 谢谢了

Answer 1

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

1. onload事件是加载成功，这个callback写不写无所谓

2. 浏览器不需要知道图片加载完成了

3. 原理说过了

Answer 2

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