图片的懒加载与预加载区别呢?

linzx1993
  • 114

我一直很好奇没看到说预加载是什么样子的。
我可以做到监测滚动,判断到一定距离加载对应的图片,也就是懒加载。
但是一直说有一种优化叫预加载,说是等任务空闲再去加载图片进来。
但是怎么实现呢?
我感觉核心是在在如何判断处于任务空闲状态?怎么判断呢?

回复
阅读 3.5k
2 个回答
安歌
  • 6.9k
✓ 已被采纳

关于题目问到的预加载和懒加载的区别:

  1. 预加载是指在页面加载完成之前,提前将所需资源下载,之后使用的时候从缓存中调用;懒加载是延迟加载,按照一定的条件或者需求等到满足条件的时候再加载对应的资源

  2. 预加载增加了服务器压力,换来的是用户体验的提升,典型例子是在一个图片较多的网页中,如果使用了预加载就可以避免网页加载出来是时,图片的位置一片空白(图片可能还没加载出来),造成不好的用户体验;懒加载的作用减少不要的请求,缓解了服务器压力

关于预加载的实现:

最常用的图片预加载new Image()原理:设置其src来实现预载,再使用onload方法回调预载完成事件。当浏览器把图片下载到本地后,后续同样的src就可以使用缓存了。

预加载就是提前加载咯 假设数据是分页展示的 你在当前页浏览的时候可以提前加载下一页的内容 但是先保持隐藏
当用户真的触发翻页了 直接将下一页的数据显示就好了 这样就减少了频繁翻页用户的等待时间 不需要判断空闲状态吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏