lozad.js ﹣ 高性能、無依賴的純 JS 任意元素懶加載插件

npm install --save lozad

yarn add lozad

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"
></script>

import lozad from "lozad";

var lozad = require("lozad");

<img class="lozad" data-src="image.png" />

const observer = lozad(); // 默認使用 '.lozad' 選擇器
observer.observe();

const el = document.querySelector("img");
const observer = lozad(el);
observer.observe();

const el = document.querySelectorAll("img");
const observer = lozad(el);
observer.observe();

const observer = lozad(".lozad", {
  rootMargin: "10px 0px",
  threshold: 0.1,
});
observer.observe();

lozad(".lozad", {
  load: function (el) {
    console.log("loading element");

    // 自定義加載圖片
    el.src = el.getAttribute("data-src");
  },
});

lozad(".lozad", {
  loaded: function (el) {
    el.classList.add("loaded");
  },
});

observer.observe();

<!-- responsive image example -->
<img
  class="lozad"
  data-src="image.png"
  data-srcset="image.png 1000w, image-2x.png 2000w"
/>

<!-- background image example -->
<div class="lozad" data-background-image="image.png"></div>

<iframe data-src="embed.html" class="lozad"></iframe>

npm install intersection-observer

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>