图片预加载和懒加载-浅记

224 阅读1分钟

什么是预加载?

提前加载图片,加载完毕后会缓存到本地,当用户需要查看时可直接从本地缓存中渲染,拥有良好的用户体验。

使用场景:

预判用户可能会浏览的图片,提前加载,减少用户等待加载的时间。

好处:

  • 用户更好的体验,减少等待的时间。这种做法实际上牺牲了服务器的性能换取了更好的用户体验

弊端:

  • 预加载会占用较多的后台资源,因为可能一次性加载较多的图片
  • 预加载需要比较长的时间 ,一般是利用用户进行其他操作时进行。

什么是懒加载?

懒加载可以说是延迟加载甚至是不加载。当访问一个页面的时候,用统一图片路径来代替(这样就请求一次,减轻服务器压力,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,请求服务器。

使用场景:

当一次性需要加载的图片过多时,等用户看到再加载。

好处:

  • 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求。页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好。

弊端:

  • 需要监听图片是否显示,比较耗游览器性能。
  • 图片是显示时才去加载。如果网络不太好可能会有一段时间是空白

参考

超详细的图片预加载和懒加载教程。分析应用场景。大量插图。完整的代码。累死我了