WEB 使用lazysizes延迟加载图像

Posted 2021-03-07 Ajanuw

• 原文
• Native lazy-loading for the web

Example

    <style>
      div {
        height: 3000px;
      }
    </style>

    <div></div>

    <span
      >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta,
      perspiciatis sapiente explicabo animi magnam laudantium earum voluptates
      dolorum eum? Nihil aspernatur alias temporibus adipisci harum id soluta.
      Soluta, dolorum excepturi.</span
    >
    <img
      class="lazyload"
      loading="lazy"
      data-src="https://i.loli.net/2020/02/16/7PyfvO3brQRGj6d.jpg"
      width="400"
      height="400"
    />
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odit quod
      earum quas mollitia expedita quaerat illo harum obcaecati, recusandae
      molestias consectetur nemo corporis aspernatur fugit tempora aut dolorum
      dicta.</span
    >
  </body>

  <script>
    const script = document.createElement("script");
    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js";
    document.body.appendChild(script);
  </script>