my-lazyload-elements

lazyload


Keywords
mylazyloadelements, my-lazyload-elements, lazyload, lazyloadelements, lazyload-elements, vue-lazyload, vue-lazyloadelements, vue-lazyload-elements
License
ISC
Install
npm install my-lazyload-elements@2.0.1

Documentation

my-lazyload-elements

μ„€μΉ˜

npm i my-lazyload-elements

Attributes

  • data-my-lazy-class
    • μš”μ†Œκ°€ 화면에 ν‘œμ‹œλ˜κ±°λ‚˜ κ°€λ €μ§ˆ μ‹œ toggleΒ ν•  클래슀λͺ…
  • data-my-lazy-style
    • μš”μ†Œκ°€ 화면에 ν‘œμ‹œλ˜κ±°λ‚˜ κ°€λ €μ§ˆ μ‹œ toggleΒ ν•  클래슀λͺ… μŠ€νƒ€μΌ
  • data-my-lazy-src
    • μš”μ†Œκ°€ 화면에 ν‘œμ‹œλ˜λ©΄ 적용 ν•  src
  • data-my-lazy-*
    • μš”μ†Œκ°€ 보여지고 κ°€λ €μ§ˆ λ•Œ λ§ˆλ‹€ *에 ν•΄λ‹Ήν•˜λŠ” 속성 ν† κΈ€
    • ex) data-my-lazy-test="123" -> μš”μ†Œ λ…ΈμΆœ μ‹œ

image μ „μš©

  • data-my-lazy-loading
    • source 이미지가 λΆˆλŸ¬μ™€μ§ˆ λ™μ•ˆ ν‘œμ‹œ ν•  이미지

Attributes Options

  • data-my-lazy-once
    • 졜초 ν•œ 번만 이벀트λ₯Ό λ°œμƒ μ‹œν‚΅λ‹ˆλ‹€. (화면에 ν•œ 번 ν‘œμ‹œλ˜λ©΄ 더 이상 λ™μž‘ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.)

μ‚¬μš©

  <!-- my-lazy-group -->
  <!-- μ—¬λŸ¬ μš”μ†Œκ°€ λ¬Άμ—¬ μžˆλŠ” 경우 -->
  <figure 
    class="example__image__box"
    my-lazy-group  
  >
    <picture>
      <source
        media="(min-width: 360px)"
        data-my-lazy-srcset="/samples/1@1x.png"
      >
      <source
        media="(min-width: 480px)"
        data-my-lazy-srcset="/samples/1@2x.png"
      >
      <source
        media="(min-width: 800px)"
        data-my-lazy-srcset="/samples/1@3x.png"
      >
      <img
        class="example__image"
        alt="1 번째 OOO 이미지"
        data-my-lazy-loading="/samples/1-blur.png"
        data-my-lazy-src="/samples/1.png"
        data-my-lazy-style="border: 1px solid green"
        data-my-lazy-class="example__image--show"
      >
    </picture>
    <figcaption>보여주기 μœ„ν•œ μƒ˜ν”Œ 이미지 μž…λ‹ˆλ‹€.</figcaption>
  </figure>

  <!-- my-lazy -->
  <!-- 단일 μš”μ†Œλ‘œ μžˆλŠ” 경우 -->
  <figure class="example__image__box">
    <img
      class="example__image"
      alt="1 번째 OOO 이미지"
      data-my-lazy-loading="/samples/1-blur.png"
      data-my-lazy-src="/samples/1.png"
      data-my-lazy-style="border: 1px solid green"
      data-my-lazy-class="example__image--show"
      my-lazy
    >
    <figcaption>보여주기 μœ„ν•œ μƒ˜ν”Œ 이미지 μž…λ‹ˆλ‹€.</figcaption>
  </figure>
const container: Element = document.body;
const myLazyLoadElements = new MyLazyLoadElements(container, {}, {
  error: (error, result) => {
    if (result?.element instanceof HTMLImageElement) result.element.src = './assets/logo.png';
  },
  ...
});

Examples