页面懒加载

  <!-- 懒加载 : 减少网络请求次数的方案 -->

    <div data-id="10" myindex="hello" style="height: 1000px"></div>

    <img data-mysrc="./img/sign1.jpg" alt="" />

    <img data-mysrc="./img/sign2.jpg" alt="" />

    <img data-mysrc="./img/sign3.jpg" alt="" />

    <script>

      let mydiv = document.querySelector("div");

      //   自定义属性data-xxx 通过ele.dataset.xxx获取

      //   console.log(mydiv.dataset.id);

      //   console.log(mydiv.getAttribute("myindex"));

       

      window.onscroll = function (e) {

        if (window.pageYOffset >= 265) {

          // 加载图片

          let allimgs = document.querySelectorAll("img");

          Array.from(allimgs).forEach((ele) => {

            console.log(ele.dataset.mysrc);

            ele.src = ele.dataset.mysrc;

          });

          //   事件解绑

          window.onscroll = false;

        }

      };

    </script>