懒加载和预加载

懒加载（延迟加载）

①图片懒加载：当访问一个页面的时候，先把图片路径替换为一张大小为1*1px图片的格式（这样就只请求一次，俗称占位图），只有当图片出现在浏览器的可视区域时，才设置图片真实的路径，让图片显示出来

②原因：图片数量多时，而且比较大时，如果一次性加载完，会加载的特别慢，影响用户体验

③原理：页面中的img元素，如果没有src属性，浏览器就不会发送请求去下载图片，只有设置了图片路径，浏览器才会发送请求。

懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“data-url”(这个名字时自己定义的)属性中，要用的时候取出来在设置。

④实现方式：

• 使用setTimeOut或者setInterval进行加载
• 条件加载，符合某些事件才开始异步加载
• 可视区加载  实现步骤如下：

1. 不要将图片地址放在src属性中，而是放在其他属性data-url中
2. 页面加载完成后，根据scrollTop判断图片是否在用户的视野中，如果在，则将data-url属性中的值取出存放在src属性中
3. 在滚动事件中重复判断图片是否进入视野

⑥优点：

页面加载速度快，可以减轻服务器的压力，节省了流量，用户体验好

预加载

①提前加载图片，当用户需要时可直接从本地缓存中渲染

②原因:图片数量多时，而且比较大时，如果一次性加载完，会加载的特别慢，影响用户体验

③实现方法：

• 用CSS和JS实现加载
• 仅使用JS实现
• 使用Ajax预加载

④优点：

保证图片快速、无缝的发布，提高用户体验

懒加载和预加载的对比

①概念

②区别：两者的行为是相反的，一个是延迟加载，一个是提前加载

③意义：

• 懒加载作为服务器前端的优化，对服务器前端有一定的缓解，减少或者延迟了请求数
• 预加载则会增加服务器的前端压力，换取更好的用户体验

④实现方式