search

博客列表 >懒加载作业

懒加载作业

不露声色
不露声色原创
2021年04月25日 10:01:27607浏览

实现懒加载(重在掌握原理)

正常我们看到图片显示看到一个替代图，鼠标滚动经过时，会显示真正的图片，就相当于真正的图片等到滚动到该区域等了一会才真正加载出来

原理：

那如果当前图片距离顶部的高度小于当前视口加上滚动距离的高度的时候，那么这个图片就显示出来如图

那么我们需要知道几个参数并且需要结合定时器

1.当前图片距离顶部的高度 offsetTop
2.滚动距离 document.documentElement.scrollTop
3.视口高度 document.documentElement.clientHeight;

  1. setTimeout();

奉上代码
html部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>图片懒加载案例</title>
  9.     <style>
  10.         .container {
  11.             width: 500px;
  12.             display: grid;
  13.             gap: 10px;
  14.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  15.         }
  17.         .container img {
  18.             width: 100%;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <div class="container">
  25.         <img src="images2/temp.jpg" alt="" data-src="images2/img-1.jpg" />
  26.         <img src="images2/temp.jpg" alt="" data-src="images2/img-2.jpg" />
  27.         <img src="images2/temp.jpg" alt="" data-src="images2/img-3.jpg" />
  28.         <img src="images2/temp.jpg" alt="" data-src="images2/img-4.jpg" />
  29.         <img src="images2/temp.jpg" alt="" data-src="images2/img-5.jpg" />
  30.         <img src="images2/temp.jpg" alt="" data-src="images2/img-6.jpg" />
  31.         <img src="images2/temp.jpg" alt="" data-src="images2/img-7.jpg" />
  32.         <img src="images2/temp.jpg" alt="" data-src="images2/img-8.jpg" />
  33.         <img src="images2/temp.jpg" alt="" data-src="images2/img-9.jpg" />
  34.         <img src="images2/temp.jpg" alt="" data-src="images2/img-10.jpg" />
  35.         <img src="images2/temp.jpg" alt="" data-src="images2/img-11.jpg" />
  36.         <img src="images2/temp.jpg" alt="" data-src="images2/img-12.jpg" />
  37.         <img src="images2/temp.jpg" alt="" data-src="images2/img-13.jpg" />
  38.         <img src="images2/temp.jpg" alt="" data-src="images2/img-14.jpg" />
  39.         <img src="images2/temp.jpg" alt="" data-src="images2/img-15.jpg" />
  40.         <img src="images2/temp.jpg" alt="" data-src="images2/img-16.jpg" />
  41.         <img src="images2/temp.jpg" alt="" data-src="images2/img-17.jpg" />
  42.         <img src="images2/temp.jpg" alt="" data-src="images2/img-18.jpg" />
  43.         <img src="images2/temp.jpg" alt="" data-src="images2/img-19.jpg" />
  44.         <img src="images2/temp.jpg" alt="" data-src="images2/img-20.jpg" />
  45.         <img src="images2/temp.jpg" alt="" data-src="images2/img-21.jpg" />
  46.         <img src="images2/temp.jpg" alt="" data-src="images2/img-22.jpg" />
  47.         <img src="images2/temp.jpg" alt="" data-src="images2/img-23.jpg" />
  48.         <img src="images2/temp.jpg" alt="" data-src="images2/img-24.jpg" />
  49.         <img src="images2/temp.jpg" alt="" data-src="images2/img-25.jpg" />
  50.         <img src="images2/temp.jpg" alt="" data-src="images2/img-26.jpg" />
  51.         <img src="images2/temp.jpg" alt="" data-src="images2/img-27.jpg" />
  52.         <img src="images2/temp.jpg" alt="" data-src="images2/img-28.jpg" />
  53.         <img src="images2/temp.jpg" alt="" data-src="images2/img-29.jpg" />
  54.         <img src="images2/temp.jpg" alt="" data-src="images2/img-30.jpg" />
  55.         <img src="images2/temp.jpg" alt="" data-src="images2/img-31.jpg" />
  56.         <img src="images2/temp.jpg" alt="" data-src="images2/img-32.jpg" />
  57.         <img src="images2/temp.jpg" alt="" data-src="images2/img-33.jpg" />
  58.         <img src="images2/temp.jpg" alt="" data-src="images2/img-34.jpg" />
  59.         <img src="images2/temp.jpg" alt="" data-src="images2/img-35.jpg" />
  60.         <img src="images2/temp.jpg" alt="" data-src="images2/img-36.jpg" />
  61.         <img src="images2/temp.jpg" alt="" data-src="images2/img-37.jpg" />
  62.         <img src="images2/temp.jpg" alt="" data-src="images2/img-38.jpg" />
  63.         <img src="images2/temp.jpg" alt="" data-src="images2/img-39.jpg" />
  64.         <img src="images2/temp.jpg" alt="" data-src="images2/img-40.jpg" />
  65.         <img src="images2/temp.jpg" alt="" data-src="images2/img-41.jpg" />
  66.         <img src="images2/temp.jpg" alt="" data-src="images2/img-42.jpg" />
  67.         <img src="images2/temp.jpg" alt="" data-src="images2/img-43.jpg" />
  68.         <img src="images2/temp.jpg" alt="" data-src="images2/img-44.jpg" />
  69.         <img src="images2/temp.jpg" alt="" data-src="images2/img-45.jpg" />
  70.         <img src="images2/temp.jpg" alt="" data-src="images2/img-46.jpg" />
  71.         <img src="images2/temp.jpg" alt="" data-src="images2/img-47.jpg" />
  72.         <img src="images2/temp.jpg" alt="" data-src="images2/img-48.jpg" />
  73.         <img src="images2/temp.jpg" alt="" data-src="images2/img-49.jpg" />
  74.         <img src="images2/temp.jpg" alt="" data-src="images2/img-50.jpg" />
  75.         <img src="images2/temp.jpg" alt="" data-src="images2/img-51.jpg" />
  76.         <img src="images2/temp.jpg" alt="" data-src="images2/img-52.jpg" />
  77.         <img src="images2/temp.jpg" alt="" data-src="images2/img-53.jpg" />
  78.         <img src="images2/temp.jpg" alt="" data-src="images2/img-54.jpg" />
  79.         <img src="images2/temp.jpg" alt="" data-src="images2/img-55.jpg" />
  80.         <img src="images2/temp.jpg" alt="" data-src="images2/img-56.jpg" />
  81.         <img src="images2/temp.jpg" alt="" data-src="images2/img-57.jpg" />
  82.         <img src="images2/temp.jpg" alt="" data-src="images2/img-58.jpg" />
  83.         <img src="images2/temp.jpg" alt="" data-src="images2/img-59.jpg" />
  84.         <img src="images2/temp.jpg" alt="" data-src="images2/img-60.jpg" />
  85.         <img src="images2/temp.jpg" alt="" data-src="images2/img-61.jpg" />
  86.         <img src="images2/temp.jpg" alt="" data-src="images2/img-62.jpg" />
  87.         <img src="images2/temp.jpg" alt="" data-src="images2/img-63.jpg" />
  88.         <img src="images2/temp.jpg" alt="" data-src="images2/img-64.jpg" />
  89.         <img src="images2/temp.jpg" alt="" data-src="images2/img-65.jpg" />
  90.         <img src="images2/temp.jpg" alt="" data-src="images2/img-66.jpg" />
  91.         <img src="images2/temp.jpg" alt="" data-src="images2/img-67.jpg" />
  92.         <img src="images2/temp.jpg" alt="" data-src="images2/img-68.jpg" />
  93.         <img src="images2/temp.jpg" alt="" data-src="images2/img-69.jpg" />
  94.         <img src="images2/temp.jpg" alt="" data-src="images2/img-70.jpg" />
  95.     </div>
  97. </body>
  99. </html>

js部分

  1.  const imgs = document.querySelectorAll('.container img');
  2.         // const imgs = document.images;
  3.         console.log(imgs);
  4.         //视口高度
  5.         const clientHeight = document.documentElement.clientHeight;
  6.         // 监听滚动事件
  7.         window.addEventListener("scroll", lazyload);
  8.         // 当加载好页面的时候，不能都显示替代的图片，所以可以调用一次，加载几张
  9.         window.onload = function () {
  10.             lazyload();
  11.         }
  12.         function lazyload() {
  13.             imgs.forEach((img) => {
  14.                 // 那如果当前图片距离顶部的高度小于当前视口加上滚动距离的高度的时候，
  15.                 // 那么这个图片就显示出来
  16.                 // 当前图片距离顶部的高度 offsetTop
  17.                 // 滚动距离 scrollTop
  18.                 // 视口高度 document.documentElement.clientHeight;
  19.                 // 也就是说
  20.                 if (img.offsetTop < clientHeight + document.documentElement.scrollTop) {
  21.                     setTimeout(function () {
  22.                         img.src = img.dataset.src;
  23.                     }, 500);
  24.                 }
  25.             });
  26.         }

实现效果如下：

上一条：【正则】整理详细JavaScript正则表达式入门，看这篇就够了！附常用的正则表达式大全下一条：Vue axios封装
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多