Namespace: Vue2ImReady

Methods

staticVue2ImReady.useImReady(props){VueImReadyResult}

useImReady.ts, line 32

Vue hook to check if the images or videos are loaded.

이미지와 비디오들이 로드가 됐는지 체크하는 Vue hook.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  Vue ImReady's props

  Vue ImReady의 props.

Returns:

Type	Description
VueImReadyResult

Example

import { useImReady } from "@egjs/vue2-imready";

setup() {
  const im = useImReady({
        selector: "img",
    });

  return {
     im,
     container: im.register(),
  }
}
// {{im.readyCount}}
// <div v-bind:ref="container"></div>

staticVue2ImReady.usePreReady(props){VueImReadyResult}

usePreReady.ts, line 28

Vue hook to check if the images or videos are loaded. (only usePreReady and useError are true) Since this is deprecated, use useImReady instead.

이미지와 비디오들이 로드가 됐는지 체크하는 Vue hook. (usePreReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  Vue ImReady's props

  Vue ImReady의 props.

Returns:

Type	Description
VueImReadyResult

Example

import { usePreReady } from "@egjs/vue2-imready";

setup() {
  const im = usePreReady({
        selector: "img",
    });

  return {
     im,
     container: im.register(),
  }
}
// {{im.isPreReady}}
// <div v-bind:ref="container"></div>

Deprecated

• Yes

staticVue2ImReady.usePreReadyElement(props){VueImReadyResult}

usePreReadyElement.ts, line 28

Vue hook to check if the images or videos are loaded. (only usePreReadyElement, usePreReady and useError are true) Since this is deprecated, use useImReady instead.

이미지와 비디오들이 로드가 됐는지 체크하는 Vue hook.(usePreReadyElement, usePreReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  Vue ImReady's props

  Vue ImReady의 props.

Returns:

Type	Description
VueImReadyResult

Example

import { usePreReadyElement } from "@egjs/vue2-imready";

setup() {
  const im = usePreReadyElement({
        selector: "img",
    });

  return {
     im,
     container: im.register(),
  }
}
// {{im.preReadyCount}}
// <div v-bind:ref="container"></div>

Deprecated

• Yes

staticVue2ImReady.useReady(props){VueImReadyResult}

useReady.ts, line 28

Vue hook to check if the images or videos are loaded. (only useReady and useError are true) Since this is deprecated, use useImReady instead.

이미지와 비디오들이 로드가 됐는지 체크하는 vue hook.(useReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  Vue ImReady's props

  Vue ImReady의 props.

Returns:

Type	Description
VueImReadyResult

Example

import { useReady } from "@egjs/vue2-imready";

setup() {
  const im = useReady({
        selector: "img",
    });

  return {
     im,
     container: im.register(),
  }
}
// {{im.isReady}}
// <div v-bind:ref="container"></div>

Deprecated

• Yes

staticVue2ImReady.useReadyElement(props){VueImReadyResult}

useReadyElement.ts, line 28

Vue hook to check if the images or videos are loaded. (only useReadyElement, useReady and useError are true) Since this is deprecated, use useImReady instead.

이미지와 비디오들이 로드가 됐는지 체크하는 vue hook.(useReadyElement, useReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  Vue ImReady's props

  Vue ImReady의 props.

Returns:

Type	Description
VueImReadyResult

Example

import { useReadyElement } from "@egjs/vue2-imready";

setup() {
  const im = useReadyElement({
        selector: "img",
    });

  return {
     im,
     container: im.register(),
  }
}
// {{im.readyCount}}
// <div v-bind:ref="container"></div>

Deprecated

• Yes

Type Definitions

Vue2ImReady.ImReadyPropsTSInterface

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

Vue2ImReady.ImReadyValueTSInterface

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 사전 준비가 끝났는지 여부
register	<T extends HTMLElement>(ref?: Ref<T | null | undefined>) => Ref<T | null | undefined>	Ref function that can register the element to be checked 체크할 엘리먼트를 등록할 수 있는 ref 함수