JS原生图片懒加载

图片懒加载

懒加载是前端优化的一种技术,旨在用户进入页面后,当滚动页面将要到达图片位置时才加载图片。
加快页面加载速度,极大的提升了用户体验,也避免了用户进入页面之后就发送n多个图片请求,服务器吃不消啊!

实现原理

先将图片的 src 设置为空或者小的图片,将真实的图片地址存在 img 的自定义属性中,比如 data-src 中,等到页面滚动至图片位置时将真实图片位置复制给 src 属性。

  1. 页面中的 img 元素,如果没有 src 属性,浏览器就不会发出请求去下载图片
  2. 用户滚动页面至图片位置时,img 元素获取到真正的路径后,开始发送请求加载图片
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×