预加载和懒加载的区别

懒加载

当访问一个页面的时候，先把img元素背景图片路径替换成一张占位图，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

图片懒加载的原理：a)懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”属性里，页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data- url属性中的值取出存放到src属性中。在滚动事件中重复判断图片是否进入视野，如果进入，则将data-url属性中的值取出存放到src属性中

预加载

提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
实现方式：
方法一：用CSS和JavaScript实现预加载
方法二：仅使用JavaScript实现预加载
方法三：使用Ajax实现预加载