图片懒加载和预加载

一、懒加载

掘金

• 1.什么是懒加载
  延迟加载，指长网页中延迟加载图像，用户滚动到它们之前，可视区域外的图像不会加载
• 2.为什么要懒加载
  1）提升用户体验
  2）减少无效资源的加载
  3）防止并发加载的资源过多造成js阻塞
• 3.懒加载的原理
  首先将页面上的图片的 src属性设为空字符串，而图片的真实路径则设置在data-original属性中，
  当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

二、步骤

• 1.预加载
  将所有所需的资源提前加载至本地，后面直接从缓存中获取资源

• 2.为什么要用预加载
  如果一个页面内容过于庞大，没有预加载就会长时间展示一片空白页面，直至页面所有内容全部加载完毕

• 3.预加载的方法
  1）使用html标签

<img src='.....'   style='display:none' />

2）使用Image对象

<script src='...'></script>

3）使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程

4)使用PreloadJS库