预加载是什么？懒加载是什么？以及两者之间的区别

1.什么叫懒加载呢？ （1）懒加载的介绍

 懒加载其实也叫做延迟加载、按需加载，比如在长网页中延迟加载图片数据，是一种比较好的网页性能优化的方法。在比较长的网页或应用中，如果图片有很多，一下子之间把所有的图片都加载出来的话，耗费很多性能，而且用户说不定会把图片一一全部看完。

如果使用图片的懒加载的话，就可以解决上述问题咯，解决方法就是 只加载在可视窗口内的部分图片，其余图片都先不加载，之后随着鼠标的滚轮或者滚动条的滚动，到哪了，哪里才会加载图片，通过这种方式，好处也很明显：

                （1）网页的加载速度更快

                （2）服务器的负载一定程度的减小了

懒加载的使用，一般适用于图片较多，页面列表较长的场景之中。

（2）懒加载的特点 减少无用资源的加载：使用懒加载明显减小了服务器的压力，减小了浏览器的负担提升用户的体验：如果同时加载了很多图片的话，那相对来说，用户的等待的时间也会随之增加，这样就很影响用户的体验，而使用懒加载的话，能明显减小用户的等待时间，大大的提升用户的体验感！防止加载过多的图片而影响其他资源文件的加载：会影响网站应用的正常使用 （3）.懒加载的实现原理

首先我们要明白，图片的加载是怎么产生的？ 图片的加载是由src属性引起的，当对src赋值时，浏览器就会请求图片资源，根据此特点，我们先用data-load属性来存储图片的路径，在需要加载图片的时候，将data-load 中图片的路径赋值给src，这样就实现了懒加载啦。

（4）.实现一个懒加载

       通过JS 实现一个懒加载：

        （1）window.innerHeight  获取浏览器可视区域的高度

        （2）document.body.scrollTop ||  document.documentElement.scrollTop  获取浏览器滚动过的距离

       （3）xx.offsetTop 是元素的顶部，距离文档顶部的高度

       （4）图片的加载条件： xx.offsetTop < window.innerHeight + document.body.scrollTop  (即也就是当图片所在位置，进入到了当前浏览器的可视窗口中去)

    请看代码啦：