关注本站公众号,
获取永久访问授权码
扫码关注,回复『刷题』即可.
~技术问答题~
返 回

No.819 请说说图片懒加载原理?

题目描述~ 略...

寄语:问题比答案更重要

建议自己先有个思考的过程,有了自己的答案或者疑问再看解析进行对比。

目前解析在逐步添加中,也可以跳转链接查看。

图片懒加载也叫延迟加载,只加载当前屏幕的图片,可视区域外的图片不会进行加载,只有当屏幕滚动的时候才加载。

特点:

*提高网页加载速度

  • 减少后台服务器压力

  • 提升用户体验

原理:

  • 将图片地址存储到 data-xxx 属性上

  • 判断图片是否在可视区域

  • 如果在,就设置图片 src

  • 绑定 scroll 监听事件

来源:https://juejin.cn/post/7273119689185673253?searchId=202403032352379C9BE8A3094AC2C3252A

解析或答案仅供参考。

关于作者

zz_jesse 专注前端

掘金 我的开源项目

公众号@前端技术江湖

一个可以帮开发者成长的公众号前端面试题库更新通知前端学习资料、干货文章

技术交流群

交流中成长大厂内推机会