JavaScript手写专题——图片懒加载、滚动节流、防抖手写

最新推荐文章于 2024-08-20 22:16:54 发布

原创

最新推荐文章于 2024-08-20 22:16:54 发布 · 1.2k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

图片懒加载场景：在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！我们再想，用户真的需要这么多图片吗？不对，用户点开页面的瞬间，呈现给他的只有屏幕的一部分（我们称之为首屏）。只要我们可以在页面打开的时候把首屏的图片资源加载出来，用户就会认为页面是没问题的。至于下面的图片，我们完全可以等用户下拉的瞬间再即时去请求、即时呈现给他。这样一来，性能的压力小了，用户的体验却没有变差——这个延迟加载的过程，就是 Lazy-Load

搭建图片懒加载场景

通常我们访问网页的时候会出现页面的场景，没来得及被图片填充完全的网页，是用大大小小的空 div 元素来占位的。一旦我们通过滚动使得这个 div 出现在了可见范围内，那么 div 元素的内容就会发生变化

可以设置这样一个html页面

使用data-语法给img标签添加自定义属性，比如使用data-src给img预制一个属性，存储当前图片将要显示的图片路径。之后当元素在可视窗口时通过js将data-src替换给src属性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lazy-Load</title>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
      }
      .img {
        width: 400px;
        height: 400px;
        margin: 10px;
        background: gray;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="img">
        <img alt="加载中1" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中2" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中3" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中4" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中5" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中6" class="pic" data-src="./images/ima