ImReady

Class: ImReady

eg.ImReady

new eg.ImReady(options)

ImReadyManager.ts, line 14
  • options (default: {}) optional
    Type: Partial<ImReadyOptions>

    ImReady's options

    ImReady's options

Extends

  • eg.Component

Methods

check(elements){this}

ImReadyManager.ts, line 60

Checks whether elements are in the ready state.

엘리먼트가 준비 상태인지 체크한다.

  • elements
    Type: ArrayFormat<HTMLElement>
Returns:
Type Description
this
Example
<div>
   <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
   <img src="./2.jpg" data-width="1280" data-height="853"/>
   <img src="ERR" data-width="1280" data-height="853"/>
</div>



Javascript


import ImReady from "@egjs/imready";

const im = new ImReady(); // umd: eg.ImReady
im.check(document.querySelectorAll("img")).on({
  preReadyElement: e => {
    // 1, 3
    // 2, 3
    // 3, 3
    console.log(e.preReadyCount, e.totalCount),
  },
});

clear()

ImReadyManager.ts, line 151

Clears events of elements being checked.

체크 중인 엘리먼트들의 이벤트를 해제 한다.

destroy()

ImReadyManager.ts, line 168

Destory all events.

모든 이벤트를 해제 한다.

getTotalCount()

ImReadyManager.ts, line 123

Gets the total count of elements to be checked.

체크하는 element의 총 개수를 가져온다.

hasError()

ImReadyManager.ts, line 144

Whether an error has occurred in the elements in the current state.

현재 상태에서 엘리먼트들이 에러가 발생했는지 여부.

isPreReady()

ImReadyManager.ts, line 130

Whether the elements are all pre-ready. (all sizes are known)

엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부.

isReady()

ImReadyManager.ts, line 137

Whether the elements are all ready.

엘리먼트들이 모두 준비가 됐는지 여부.

Type Definitions

eg.ImReady.ImReadyEventsTSInterface

Properties:
Name Type Description
preReadyElement OnPreReadyElement
readyElement OnReadyElement
error OnError
preReady OnPreReady
ready OnReady

eg.ImReady.ImReadyHooksPropsTSInterface

Properties:
Name Type Description
prefix string

Prefix for data size attribute.

데이터 사이즈 속성의 접두사.
loaders Record<string, new (target: HTMLElement, options: ImReadyLoaderOptions) => Loader>

The loader class map that determines how to ready for the element.

element에 대해 어떻게 준비할지 결정하는 loader 클래스 맵.
selector string

Find the children of the element registered with the register function through the selector. (default: "")

selector를 통해 register 함수로 등록한 엘리먼트의 children을를 찾는다. (default: "")
useReadyElement boolean

Whether to use the readyElement event. You can use the readyCount, isPreReadyOver value. (default: true)

readyElement 이벤트를 사용할지 여부. readyCount, isPreReadyOver 값을 사용할 수 있다. (default: true)
useReady boolean

Whether to use the preReadyElement event. You can use the preReadyCount value. (default: true)

preReadyElement 이벤트를 사용할지 여부. preReadyCount 값을 사용할 수 있다. (default: true)
usePreReadyElement boolean

Whether to use the ready event. You can use the isReady value. (default: true)

ready 이벤트를 사용할지 여부. isReady 값을 사용할 수 있다. (default: true)
usePreReady boolean

Whether to use the preReady event. You can use the isPreReady value. (default: true)

preReady 이벤트를 사용할지 여부. isPreReady 값을 사용할 수 있다. (default: true)
useError boolean

Whether to use the error event. You can use the hasError, errorCount, totalErrorCount value. (default: true)

error 이벤트를 사용할지 여부. hasError, errorCount, totalErrorCount 값을 사용할 수 있다. (default: true)
Deprecated
  • Yes

eg.ImReady.ImReadyHooksValueTSInterface

Properties:
Name Type Description
hasError boolean

Whether there is an error in the element

해당 엘리먼트에 에러가 있는지 여부
errorCount number

The number of elements with errors

에러가 있는 엘리먼트들의 개수
totalErrorCount number

The total number of targets with errors

에러가 있는 타겟들의 총 개수
preReadyCount number

Number of elements pre-ready

사전 준비된 엘리먼트들의 개수
readyCount number

Number of elements ready

준비된 엘리먼트들의 개수
totalCount number

Total number of elements

엘리먼트들의 총 개수
isPreReady boolean

Whether all elements are pre-ready

모든 엘리먼트가 사전 준비가 끝났는지 여부
isReady boolean

Whether all elements are ready

모든 엘리먼트가 준비가 끝났는지 여부
isPreReadyOver boolean

Whether pre-ready is over

사전 준비가 끝났는지 여부

eg.ImReady.ImReadyLoaderEventsTSInterface

Properties:
Name Type Description
error OnLoaderError
ready OnLoaderReady
preReady OnLoaderPreReady
[key: string] any

eg.ImReady.ImReadyLoaderOptionsTSInterface

Properties:
Name Type Description
prefix string

Prefix for data size attribute.

데이터 사이즈 속성의 접두사.

eg.ImReady.ImReadyOptionsTSInterface

Properties:
Name Type Description
prefix string

Prefix for data size attribute.

데이터 사이즈 속성의 접두사.
loaders Record<string, new (target: HTMLElement, options: ImReadyLoaderOptions) => Loader>

The loader class map that determines how to ready for the element.

element에 대해 어떻게 준비할지 결정하는 loader 클래스 맵.

eg.ImReady.ImReadyReactivePropsTSInterface

Properties:
Name Type Description
prefix string

Prefix for data size attribute.

데이터 사이즈 속성의 접두사.
loaders Record<string, new (target: HTMLElement, options: ImReadyLoaderOptions) => Loader>

The loader class map that determines how to ready for the element.

element에 대해 어떻게 준비할지 결정하는 loader 클래스 맵.
selector string
useReadyElement boolean
useReady boolean
usePreReadyElement boolean
usePreReady boolean
useError boolean

eg.ImReady.OnErrorTSInterface

Properties:
Name Type Description
element HTMLElement

The element with error images.

오류난 이미지가 있는 엘리먼트.
index number

The item's index with error images.

오류난 이미지가 있는 엘리먼트의 인덱스.
target HTMLElement

Error image target in element.

엘리먼트의 오류난 이미지 타겟.
errorCount number

The number of elements with errors.

에러가 있는 엘리먼트들의 개수.
totalErrorCount number

The total number of targets with errors.

에러가 있는 타겟들의 총 개수.

eg.ImReady.OnLoaderErrorTSInterface

Properties:
Name Type Description
element HTMLElement
target HTMLElement

eg.ImReady.OnLoaderPreReadyTSInterface

Properties:
Name Type Description
element HTMLElement
hasLoading boolean
isSkip boolean

eg.ImReady.OnLoaderReadyTSInterface

Properties:
Name Type Description
element HTMLElement
withPreReady boolean
hasLoading boolean
isSkip boolean

eg.ImReady.OnPreReadyTSInterface

Properties:
Name Type Description
readyCount number

Number of elements ready

준비된 엘리먼트들의 개수
totalCount number

Total number of elements

엘리먼트들의 총 개수
isReady boolean

Whether all elements are ready

모든 엘리먼트가 준비가 끝났는지 여부
hasLoading boolean

Whether the loading attribute has been applied

loading 속성이 적용되었는지 여부

eg.ImReady.OnPreReadyElementTSInterface

Properties:
Name Type Description
element HTMLElement

The pre-ready element.

사전 준비된 엘리먼트.
index number

The index of the pre-ready element.

사전 준비된 엘리먼트의 인덱스.
preReadyCount number

Number of elements pre-ready.

사전 준비된 엘리먼트들의 개수.
readyCount number

Number of elements ready.

준비된 엘리먼트들의 개수.
totalCount number

Total number of elements.

엘리먼트들의 총 개수.
hasLoading boolean

Whether all elements are pre-ready.

모든 엘리먼트가 사전 준비가 끝났는지 여부.
isPreReady boolean

Whether all elements are ready.

모든 엘리먼트가 준비가 끝났는지 여부.
isReady boolean

Whether the loading attribute has been applied.

loading 속성이 적용되었는지 여부.
isSkip boolean

Whether the check is omitted due to skip attribute.

skip 속성으로 인하여 체크가 생략됐는지 여부.

eg.ImReady.OnReadyTSInterface

Properties:
Name Type Description
errorCount number

The number of elements with errors

에러가 있는 엘리먼트들의 개수
totalErrorCount number

The total number of targets with errors

에러가 있는 타겟들의 총 개수
totalCount number

Total number of elements

엘리먼트들의 총 개수

eg.ImReady.OnReadyElementTSInterface

Properties:
Name Type Description
element HTMLElement

The ready element.

준비된 엘리먼트
index number

The index of the ready element.

준비된 엘리먼트의 인덱스
preReadyCount number

Whether there is an error in the element

해당 엘리먼트에 에러가 있는지 여부
readyCount number

The number of elements with errors

에러가 있는 엘리먼트들의 개수
errorCount number

The total number of targets with errors

에러가 있는 타겟들의 총 개수
totalErrorCount number

Number of elements pre-ready

사전 준비된 엘리먼트들의 개수
totalCount number

Number of elements ready

준비된 엘리먼트들의 개수
hasLoading boolean

Total number of elements

엘리먼트들의 총 개수
isPreReady boolean

Whether all elements are pre-ready

모든 엘리먼트가 사전 준비가 끝났는지 여부
isReady boolean

Whether all elements are ready

모든 엘리먼트가 준비가 끝났는지 여부
hasError boolean

Whether the loading attribute has been applied

loading 속성이 적용되었는지 여부
isPreReadyOver boolean

Whether pre-ready is over

사전 준비가 끝났는지 여부
isSkip boolean

Whether the check is omitted due to skip attribute

skip 속성으로 인하여 체크가 생략됐는지 여부

Events

error

ImReadyManager.ts, line 242

An event occurs if the image, video fails to load.

이미지, 비디오가 로딩에 실패하면 이벤트가 발생한다.

  • e

    The object of data to be sent to an event

    이벤트에 전달되는 데이터 객체

Example
<div>
   <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
   <img src="./2.jpg"/>
   <img src="ERR"/>
</div>



Javascript


import ImReady from "@egjs/imready";

const im = new ImReady(); // umd: eg.ImReady
im.check([document.querySelector("div")]).on({
  error: e => {
    // <div>...</div>, 0, <img src="ERR"/>
    console.log(e.element, e.index, e.target),
  },
});

preReady

ImReadyManager.ts, line 322

An event occurs when all element are pre-ready (When all elements have the loading attribute applied or the size is known)

모든 엘리먼트들이 사전 준비된 경우 (모든 엘리먼트들이 loading 속성이 적용되었거나 사이즈를 알 수 있는 경우) 이벤트가 발생한다.

  • e

    The object of data to be sent to an event

    이벤트에 전달되는 데이터 객체

Example
<div>
   <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
   <img src="./2.jpg" data-width="1280" data-height="853"/>
   <img src="ERR" data-width="1280" data-height="853"/>
</div>



Javascript


import ImReady from "@egjs/imready";

const im = new ImReady(); // umd: eg.ImReady
im.check(document.querySelectorAll("img")).on({
  preReady: e => {
    // 0, 3
    console.log(e.readyCount, e.totalCount),
  },
});

preReadyElement

ImReadyManager.ts, line 278

An event occurs when the element is pre-ready (when the loading attribute is applied or the size is known)

해당 엘리먼트가 사전 준비되었을 때(loading 속성이 적용되었거나 사이즈를 알 수 있을 때) 이벤트가 발생한다.

Example
<div>
   <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
   <img src="./2.jpg" data-width="1280" data-height="853"/>
   <img src="ERR" data-width="1280" data-height="853"/>
</div>



Javascript


import ImReady from "@egjs/imready";

const im = new ImReady(); // umd: eg.ImReady
im.check(document.querySelectorAll("img")).on({
  preReadyElement: e => {
    // 1, 3
    // 2, 3
    // 3, 3
    console.log(e.preReadyCount, e.totalCount),
  },
});

ready

ImReadyManager.ts, line 406

An event occurs when all element are ready

모든 엘리먼트들이 준비된 경우 이벤트가 발생한다.

  • e

    The object of data to be sent to an event

    이벤트에 전달되는 데이터 객체

Example
<div>
   <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
   <img src="./2.jpg" data-width="1280" data-height="853"/>
   <img src="ERR" data-width="1280" data-height="853"/>
</div>



Javascript


import ImReady from "@egjs/imready";

const im = new ImReady(); // umd: eg.ImReady
im.check(document.querySelectorAll("img")).on({
  preReady: e => {
    // 0, 3
    console.log(e.readyCount, e.totalCount),
  },
  ready: e => {
    // 1, 3
    console.log(e.errorCount, e.totalCount),
  },
});

readyElement

ImReadyManager.ts, line 357

An event occurs when the element is ready

해당 엘리먼트가 준비가 되었을 때 이벤트가 발생한다.

Example
<div>
   <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
   <img src="./2.jpg" data-width="1280" data-height="853"/>
   <img src="ERR" data-width="1280" data-height="853"/>
</div>



Javascript


import ImReady from "@egjs/imready";

const im = new ImReady(); // umd: eg.ImReady
im.check(document.querySelectorAll("img")).on({
  readyElement: e => {
    // 1, 0, false, 3
    // 2, 1, false, 3
    // 3, 2, true, 3
    console.log(e.readyCount, e.index, e.hasError, e.totalCount),
  },
});
comments powered by Disqus