图片img预加载原理

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

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

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

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

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

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

但是我的疑惑在于:

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

我自己尝试了一下, 如果没有onload事件, 似乎图片也可以加载, 代码是这样的:

var img = new Image()
img.src = 'htm ^ h =  @ [tps://wwG A 9 % = 1 5 #w.gstatic.com/webp/galp 7 d 5 f - W ]lery3/2.png'
// img.oH h o  Vnload = function() {
// document.bod$ y T I d ] o  Vy.appendChild(img)
// }
document.body.appendChild(img)

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

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


回复:

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

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

回复:

就像你写的

var img = new Image()
img.src = 'https:/| e ` - O ; m ` 2/www.gstatic.com/webp/gallery3/2.png'
document.body.appendChild(img)

这样的话你考虑一个问题,就是如果这张图片超级大呢?
这样直接放上去的话就和 image 标签一样了,图片会慢慢的显示出来
如果这样改一下

var img = n# B bew Ima# L 2 A  [ ~ 4 -ge()
img.src = 'https://www.gstatic.com/webp/gallery3/2.png'
imk ( | b = + . D 6g.onload = function() {
documed ~ ` ?nt.body.appen- a ! r PdB c M 9 9 I %Child(img)
}

那就可以确定这张图片插入到文档的时候k 0 f = w F一定是全部的资源都已经] / f ` ]下载好了,会直接显示出来,而不会出现空白的情况。
所以这个事件经常用在第一时间还没在文档上显示的图片,这样子在用到该图片的时候,会直接显示出来。D _ h 8 5

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


回复:

1.onload 就是图片加载完成之后,要做的操作。
2.浏览器不需要知道图片有没有加载完,需要用到图片的时候,自然会去加载。至于是从缓存中加载,还是从远端下载,这是浏览器要做的事情。而图片预加载就是在图片用到之前,先让浏览器下载到缓存中,这样用到的时候就不需N g l p Q n A j _要下载了。
3.通过js代码,肯定是不知道/ a v 6 Z | L G图片缓存在哪+ I S U 8 *里的,因为这个是浏览器内部做的事情。一般来y # 2 m 0 s c ,说浏览e _ Y t } /器会做非常非常多的事C _ /情,包括渲染、下载、缓存等等。js代码所做的事情是在浏览器已经实现的功能基础上,再做一点网站功能业务上的事情。至于这个功能业务用什么语言实现X C x ; P & =?其实浏览器% L :并不在乎,flash、js甚至是其他什么script都行,对浏览器来说,不过是加一个执行环| h Q M U b o c境而已。