懒加载和预加载

• 理解懒加载和预加载的原理
• 懒加载与预加载案例
• 懒加载与预加载实战

什么是懒加载

图片进入可视区之后请求图片资源 对于电商等图片很多、页面很长的业务场景适用 减少无效资源的加载 并发加载的资源过多会阻塞js的加载，影响网站的正常使用

做法： 需要监听scroll事件，在scroll事件的回调中 去判断我们的懒加载图片是否进入可视区域

什么是预加载

图片等静态资源在使用之前提前请求 资源使用到时能从缓存中加载，提升用户体验 页面展示的依赖关系维护

预加载的三种做法

1. 通过设置样式，默认是通过DOM加载的，但不显示

<img src="./图片1.jpg" style="display:none">

2. 使用Image对象，并设置src，这样脚本运行便会加载，动态添加到需要的DOM中即可

var image = new Image();
image.src = './图片2.jpg';
document.getElementById('#gallery').appendChild(image)

3. 通过XMLHttpRequest

可更精细地控制 但会有跨域问题~

preload.js

var queue = new createjs.LoadQueue(false);

queue.on('complete', handleComplete, this);

queue.loadManifest([
  {id: 'img1', src: 'http://image.com/images/img1.jpg'},
  {id: 'img2', src: 'http://image.com/images/img2.jpg'}
]);

function handleComplete() {
  var image = queue.getResult('myImage');
  document.body.appendChild(image)
}