本人新手, 最近在学习javascript
时对图片的预加载问题不是特别理解, 如下:
看了网上的一些博客, 基本上思路是这样的:
var img = new Image()
img.src = "url"
img.onload = function() {
callback()
}
先是设置src
来实现预载, 然后用onload
方法回调预加载完成事件.
但{ l $ x是到底是怎样的一个原理我不太理解, 个人暂时的理解是这样的:
- 将图片加载到
img
对象里面, 这个对象包含了路径 - 使用
onload
判断是否加载完成
但是我的疑惑在于:
- 为什么要使用
oT w o & B Anload
事件, 这个事件里面的回调函数通常是干什么的 - 浏览器怎么知道图片加载完成了
- 网上说是将图片缓存在浏览器, 但是根据这个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标签,浏览器会发出请求,这个过程用户是看不到了。到了页面上真正要显示这张图片的时候,浏览器一检查,哎,原来缓存过来,那就不下载了,直接显示,给用户的感觉就是秒加载
了
- onload事件是加载成功,这个callback写不写无所谓
- 浏览器不需要知道图片加载完成了
- 原理说过了
回复:
就像你写的
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境而已。
发表评论