图片的懒加载与预加载区别呢？

Question

我一直很好奇没看到说预加载是什么样子的。
我可以做到监测滚动，判断到一定距离加载对应的图片，也就是懒加载。
但是一直说有一种优化叫预加载，说是等任务空闲再去加载图片进来。
但是怎么实现呢？
我感觉核心是在在如何判断处于任务空闲状态？怎么判断呢？

Answer 1

关于题目问到的预加载和懒加载的区别：

1. 预加载是指在页面加载完成之前，提前将所需资源下载，之后使用的时候从缓存中调用；懒加载是延迟加载，按照一定的条件或者需求等到满足条件的时候再加载对应的资源

2. 预加载增加了服务器压力，换来的是用户体验的提升，典型例子是在一个图片较多的网页中，如果使用了预加载就可以避免网页加载出来是时，图片的位置一片空白（图片可能还没加载出来），造成不好的用户体验；懒加载的作用减少不要的请求，缓解了服务器压力

关于预加载的实现：

最常用的图片预加载new Image()原理：设置其src来实现预载，再使用onload方法回调预载完成事件。当浏览器把图片下载到本地后，后续同样的src就可以使用缓存了。