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';
},
...
});
