懒加载和预加载

懒加载就是在资源进入可视区域之后再加载

1. 页面可视区高度： clientHeight = window.innerHeight
2. 元素在页面中的位置： rect = el.getBoundingClientRect()
3. 如果页面在可视区域： rect.top < clientHeight && rect.bottom

预加载，就是在资源进入可视区域之前完成加载

1. 用css隐藏此标签，做提前加载: display： none;
2. 使用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'
   

3. 使用XMLHttpRequest,
   1. 可以更好的控制整个加载的过程
   2. 存在跨域问题
4. PreloadJS 库， 已经帮助实现了懒加载和预加载。 原理就是上述三种方式