js懒加载和预加载的对比

什么是预加载什么是懒加载
预加载：顾名思义就是提前加载，比如提前加载图片。当用户需要查看时，可直接从本地缓存中取。
预加载的优点在于如果一张图片过大，那么请求加载图片一定会慢，页面会出现空白的现象，用户体验感就变差了，为了提高用户体验，先提前加载图片到本地缓存，当用户一打开页面时就会看到图片。
实现方式：
1、虚拟代理实现图片预加载
关键在于new 一个image对象，当图片对象的onload事件被触发时设置真实的图片路径。这是最常用的方式
2、在CSS background中加载：会增加页面的整体加载时间
应用场景：某个效果切换按钮需要临时切换一张图片，如果图片不预先加载，页面会出现短暂的空白影响用户体验。
懒加载：懒加载就是需要用到的时候才去加载，也称是延迟加载。
懒加载的优点在于如果在页面一加载的时候就加载全部图片，这样会影响网站加载速度和加大服务器负担，而且用户体验也必然不好，那么这时候可以采用懒加载。懒加载会减轻服务器的压力，减少一次性请求的压力和延迟请求，是服务器前端的优化。
实现方式
1、将img的src属性先使用一张本地占位符，或者为空。然后真实的图片路径再定义一个data-img属性存起来，待达到一定条件的时将data-img的属性值赋给src。