懒加载就是在资源进入可视区域之后再加载
- 页面可视区高度： clientHeight = window.innerHeight
- 元素在页面中的位置： rect = el.getBoundingClientRect()
- 如果页面在可视区域： rect.top < clientHeight && rect.bottom
预加载，就是在资源进入可视区域之前完成加载
- 用css隐藏此标签，做提前加载: display： none;
- 使用js的方式，优先使用这种方式
const img = new Image() console.log('run') // onload script 页面结束加载之后触发。 img.onload = function(e) { alert('image loaded') } img.src = 'https://www.baidu.com/img/bd_logo1.png?where=super' - 使用XMLHttpRequest,
- 可以更好的控制整个加载的过程
- 存在跨域问题
- PreloadJS 库， 已经帮助实现了懒加载和预加载。 原理就是上述三种方式
