Js提升：如何实现图片懒加载

news2024/11/16 9:26:11

知其然，更要知其所有然，在不同场景下该用什么方法，如何做到最优。

为什么要出现图片懒加载，解决了什么问题？除了懒加载，还有预加载呢？什么是预加载，怎么实现，相比于懒加载如何？

为什么要图片懒加载以及懒加载解决的问题

例如：按需加载，用户只能看到可视窗口的一部分图片数据，如果图片被一次性加载出来，将会耗费大量的加载时间，容易造成卡顿等现象，浪费了此时的性能。因此需要懒加载（可以理解为用户滑动可视窗口才会加载可视窗口的数据）

懒加载：当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。一个是提前加载，一个是迟缓加载甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力，当然，预加载可帮助用户在浏览网站内容时操作得到最快的反映，提升用户体验

懒加载的概念

懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。而使用懒加载的方式就能有效的提高加载性能。

实现原理

我们知道图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就可以实现图片的按需加载，即懒加载。

在分析代码实现之前，我们还需要了解以下知识点：

window.innerHeight 是浏览器可视区的高度。
document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离。
imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）。
图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop。

代码实现
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>图片懒加载</h1>
    <div class="container">
      <p>Lorem</p>
      <p>Lorem</p>
      <img class="scroll-con-img" src="" data-src="./images/曾小龙.jpg" />
      <img class="scroll-con-img" src="" data-src="./images/meet.jpg" />
      <img class="scroll-con-img" src="" data-src="./images/meet.jpg" />
    </div>
  </body>
</html>
<script>
  //第一种方法
  var imgs = document.querySelectorAll('img')
  function lozyLoad() {
    var scrollTop =
      document.body.scrollTop || document.documentElement.scrollTop
    var winHeight = window.innerHeight
    for (var i = 0; i < imgs.length; i++) {
      if (imgs[i].offsetTop < scrollTop + winHeight) {
        imgs[i].src = imgs[i].getAttribute('data-src')
      }
    }
    console.log("我想你了");
  }
  window.onscroll = lozyLoad();
</script>