js-懒加载

Posted 2020-11-01 小飞博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js-懒加载相关的知识，希望对你有一定的参考价值。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <meta charset="utf-8">
  5   <title>lazyload</title>
  6   <script src="./index.js"></script>
  7 </head>
  8 <style>
  9 .container{
 10   width:100%;
 11 }
 12 .img-area{
 13   height:600px;
 14   text-align: center
 15 }
 16 </style>
 17 <body>
 18   <div class="container">
 19     <div class="img-area">
 20       <img class="my-photo" alt="loading" data-src="./img/img1.png">
 21     </div>
 22     <div class="img-area">
 23       <img class="my-photo" alt="loading" data-src="./img/img2.png">
 24     </div>
 25     <div class="img-area">
 26       <img class="my-photo" alt="loading" data-src="./img/img3.png">
 27     </div>
 28     <div class="img-area">
 29       <img class="my-photo" alt="loading" data-src="./img/img4.png">
 30     </div>
 31     <div class="img-area">
 32       <img class="my-photo" alt="loading" data-src="./img/img5.png">
 33     </div>
 34     <div class="img-area">
 35       <img class="my-photo" alt="loading" data-src="./img/img6.png">
 36     </div>
 37     <div class="img-area">
 38       <img class="my-photo" alt="loading" data-src="./img/img7.png">
 39     </div>
 40     <div class="img-area">
 41       <img class="my-photo" alt="loading" data-src="./img/img8.png">
 42     </div>
 43     <div class="img-area">
 44       <img class="my-photo" alt="loading" data-src="./img/img9.png">
 45     </div>
 46     <div class="img-area">
 47       <img class="my-photo" alt="loading" data-src="./img/img10.png">
 48     </div>
 49   </div>
 50   <script>
 51   function isInSight(el) {
 52   const bound = el.getBoundingClientRect();
 53   const clientHeight = window.innerHeight;
 54   //如果只考虑向下滚动加载
 55   //const clientWidth=window.innerWeight;
 56   return bound.top <= clientHeight + 100;
 57 }
 58 
 59 let index = 0;
 60 function checkImgs() {
 61   const imgs = document.querySelectorAll(‘.my-photo‘);
 62   for (let i = index; i < imgs.length; i++) {
 63     if (isInSight(imgs[i])) {
 64       loadImg(imgs[i]);
 65       index = i;
 66     }
 67   }
 68   // Array.from(imgs).forEach(el => {
 69   //   if (isInSight(el)) {
 70   //     loadImg(el);
 71   //   }
 72   // })
 73 }
 74 
 75 function loadImg(el) {
 76   if (!el.src) {
 77     const source = el.dataset.src;
 78     el.src = source;
 79   }
 80 }
 81 
 82 function throttle(fn, mustRun = 500) {
 83   const timer = null;
 84   let previous = null;
 85   return function() {
 86     const now = new Date();
 87     const context = this;
 88     const args = arguments;
 89     if (!previous) {
 90       previous = now;
 91     }
 92     const remaining = now - previous;
 93     if (mustRun && remaining >= mustRun) {
 94       fn.apply(context, args);
 95       previous = now;
 96     }
 97   }
 98 }
 99 window.onload=checkImgs;
100  window.onscroll = throttle(checkImgs);
101 </script>
102 </body>
103 </html>

以上是关于js-懒加载的主要内容，如果未能解决你的问题，请参考以下文章

原生js实现图片列表懒加载和截流

vue路由懒加载

webpack性能优化:分隔/分包/异步加载+组件与路由懒加载

webpack4 系列教程: 单页面解决方案--代码分割和懒加载

sea.js与require.js的区别