@egjs/imready - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

declaration/ImReadyManager.d.ts

@@ -16,2 +16,3 @@ import Component from "@egjs/component";
     isReady(): boolean;
+    hasError(): boolean;
     clear(): void;
@@ -18,0 +19,0 @@ destroy(): void;

declaration/loaders/ElementLoader.d.ts

@@ -6,2 +6,3 @@ import { ImReadyLoaderOptions } from "../types";
     options: ImReadyLoaderOptions;
+    setHasLoading(hasLoading: boolean): void;
     checkElement(): boolean;
@@ -8,0 +9,0 @@ destroy(): void;

declaration/loaders/ImageLoader.d.ts

 import Loader from "./Loader";
 export default class ImageLoader extends Loader<HTMLImageElement> {
     static EVENTS: string[];
-    isPreReady(): boolean;
     checkElement(): boolean;
 }

declaration/loaders/Loader.d.ts

@@ -9,7 +9,8 @@ import Component from "@egjs/component";
     protected isReady: boolean;
+    protected isPreReady: boolean;
     protected hasDataSize: boolean;
     protected hasLoading: boolean;
+    protected isSkip: boolean;
     constructor(element: HTMLElement, options?: Partial<ImReadyLoaderOptions>);
     check(): boolean;
-    isPreReady(): boolean;
     addEvents(): void;
@@ -16,0 +17,0 @@ destroy(): void;

declaration/types.d.ts

@@ -20,2 +20,3 @@ import Component from "@egjs/component";
     isReady: boolean;
+    isSkip: boolean;
 }
@@ -52,2 +53,3 @@ export interface AutoSizerElement extends HTMLElement {
     isReady: boolean;
+    isSkip: boolean;
 };
@@ -67,2 +69,3 @@ export declare type OnReadyElement = {
     isPreReadyOver: boolean;
+    isSkip: boolean;
 };
@@ -94,2 +97,3 @@ export declare type OnPreReady = {
     hasLoading: boolean;
+    isSkip: boolean;
 };
@@ -100,2 +104,3 @@ export declare type OnLoaderReady = {
     hasLoading: boolean;
+    isSkip: boolean;
 };
@@ -102,0 +107,0 @@ export declare type ImReadyLoaderEvents = {

dist/imready.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/egjs-imready
-version: 1.0.0
+version: 1.1.0
 */
@@ -214,4 +214,6 @@ 'use strict';
     _this.isReady = false;
+    _this.isPreReady = false;
     _this.hasDataSize = false;
     _this.hasLoading = false;
+    _this.isSkip = false;
 
@@ -235,4 +237,5 @@ _this.onCheck = function (e) {
     _this.element = element;
-    _this.hasDataSize = hasSizeAttribute(_this.element, _this.options.prefix);
-    _this.hasLoading = hasLoadingAttribute(_this.element);
+    _this.hasDataSize = hasSizeAttribute(element, _this.options.prefix);
+    _this.hasLoading = hasLoadingAttribute(element);
+    _this.isSkip = hasSkipAttribute(_this.element);
     return _this;
@@ -244,3 +247,3 @@ }
   __proto.check = function () {
-    if (!this.checkElement()) {
+    if (this.isSkip || hasSkipAttribute(this.element) || !this.checkElement()) {
       // I'm Ready
@@ -255,3 +258,3 @@ this.onAlreadyReady(true);
 
-    if (this.hasDataSize || this.hasLoading || this.isPreReady()) {
+    if (this.hasDataSize || this.hasLoading) {
       // I'm Pre Ready
@@ -265,6 +268,2 @@ this.onAlreadyPreReady();
 
-  __proto.isPreReady = function () {
-    return false;
-  };
-
   __proto.addEvents = function () {
@@ -305,5 +304,11 @@ var _this = this;
   __proto.onPreReady = function () {
+    if (this.isPreReady) {
+      return;
+    }
+
+    this.isPreReady = true;
     this.trigger("preReady", {
       element: this.element,
-      hasLoading: this.hasLoading
+      hasLoading: this.hasLoading,
+      isSkip: this.isSkip
     });
@@ -313,2 +318,10 @@ };
   __proto.onReady = function (withPreReady) {
+    if (this.isReady) {
+      return;
+    }
+
+    if (withPreReady) {
+      this.isPreReady = true;
+    }
+
     this.removeAutoSizer();
@@ -319,3 +332,4 @@ this.isReady = true;
       withPreReady: withPreReady,
-      hasLoading: this.hasLoading
+      hasLoading: this.hasLoading,
+      isSkip: this.isSkip
     });
@@ -363,2 +377,6 @@ };
 
+  __proto.setHasLoading = function (hasLoading) {
+    this.hasLoading = hasLoading;
+  };
+
   __proto.checkElement = function () {
@@ -458,5 +476,3 @@ if (!this.hasDataSize) {
     this.clear();
-    this.elementInfos = toArray(elements).filter(function (element) {
-      return !hasSkipAttribute(element, prefix);
-    }).map(function (element, index) {
+    this.elementInfos = toArray(elements).map(function (element, index) {
       var loader = _this.getLoader(element, {
@@ -470,3 +486,5 @@ prefix: prefix
       }).on("preReady", function (e) {
-        _this.elementInfos[index].hasLoading = e.hasLoading;
+        var info = _this.elementInfos[index];
+        info.hasLoading = e.hasLoading;
+        info.isSkip = e.isSkip;
 
@@ -480,5 +498,8 @@ var isPreReady = _this.checkPreReady(index);
         var withPreReady = _a.withPreReady,
-            hasLoading = _a.hasLoading; // Pre-ready and ready occur simultaneously
+            hasLoading = _a.hasLoading,
+            isSkip = _a.isSkip; // Pre-ready and ready occur simultaneously
 
-        _this.elementInfos[index].hasLoading = hasLoading;
+        var info = _this.elementInfos[index];
+        info.hasLoading = hasLoading;
+        info.isSkip = isSkip;
 
@@ -502,3 +523,4 @@ var isPreReady = withPreReady && _this.checkPreReady(index);
         isPreReady: false,
-        isReady: false
+        isReady: false,
+        isSkip: false
       };
@@ -529,4 +551,4 @@ });
   /**
-   * Whether the elements are all pre-ready (all sizes are known)
-   * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부
+   * Whether the elements are all pre-ready. (all sizes are known)
+   * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부.
    */
@@ -541,4 +563,4 @@
   /**
-   * Whether the elements are all ready
-   * @ko 엘리먼트들이 모두 준비가 됐는지 여부
+   * Whether the elements are all ready.
+   * @ko 엘리먼트들이 모두 준비가 됐는지 여부.
    */
@@ -553,2 +575,11 @@
   /**
+   * Whether an error has occurred in the elements in the current state.
+   * @ko 현재 상태에서 엘리먼트들이 에러가 발생했는지 여부.
+   */
+
+
+  __proto.hasError = function () {
+    return this.totalErrorCount > 0;
+  };
+  /**
    * Clears events of elements being checked.
@@ -573,3 +604,3 @@ * @ko 체크 중인 엘리먼트들의 이벤트를 해제 한다.
   /**
-   * Destory all events .
+   * Destory all events.
    * @ko 모든 이벤트를 해제 한다.
@@ -596,2 +627,6 @@ */
     var loader = new ElementLoader(element, options);
+    var children = toArray(element.querySelectorAll(tags.join(", ")));
+    loader.setHasLoading(children.some(function (el) {
+      return hasLoadingAttribute(el);
+    }));
     var withPreReady = false;
@@ -605,4 +640,4 @@ var childrenImReady = this.clone().on("error", function (e) {
       // has not data size
-      var children = getContentElements(element, tags, _this.options.prefix);
-      childrenImReady.check(children).on("preReady", function (e) {
+      var contentElements = getContentElements(element, tags, _this.options.prefix);
+      childrenImReady.check(contentElements).on("preReady", function (e) {
         withPreReady = e.isReady;
@@ -618,3 +653,2 @@
       // check only video, image elements
-      var children = toArray(element.querySelectorAll(tags.join(", ")));
       childrenImReady.check(children);
@@ -712,2 +746,3 @@ }).on("requestDestroy", function () {
      * @param {boolean} [e.hasLoading] - Whether the loading attribute has been applied <ko>loading 속성이 적용되었는지 여부</ko>
+     * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
      * @example
@@ -745,3 +780,4 @@ * ```html
       isReady: this.isReady(),
-      hasLoading: info.hasLoading
+      hasLoading: info.hasLoading,
+      isSkip: info.isSkip
     });
@@ -810,2 +846,3 @@ };
      * @param {boolean} [e.isPreReadyOver] - Whether pre-ready is over <ko>사전 준비가 끝났는지 여부</ko>
+     * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
      * @example
@@ -847,3 +884,4 @@ * ```html
       hasLoading: info.hasLoading,
-      isPreReadyOver: this.isPreReadyOver
+      isPreReadyOver: this.isPreReadyOver,
+      isSkip: info.isSkip
     });
@@ -919,13 +957,9 @@ };
 
-  __proto.isPreReady = function () {
-    var element = this.element;
-    return element.complete && (!IS_IE || IS_IE && !!element.naturalWidth);
-  };
-
   __proto.checkElement = function () {
     var element = this.element;
+    var src = element.getAttribute("src");
 
-    if (this.isPreReady()) {
+    if (element.complete && src) {
       if (!element.naturalWidth) {
-        this.onAlreadyError(this.element);
+        this.onAlreadyError(element);
       }
@@ -937,3 +971,3 @@
     this.addEvents();
-    IS_IE && element.setAttribute("src", element.getAttribute("src"));
+    IS_IE && element.setAttribute("src", src);
     return true;
@@ -940,0 +974,0 @@ };

dist/imready.esm.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/egjs-imready
-version: 1.0.0
+version: 1.1.0
 */
@@ -212,4 +212,6 @@ import Component from '@egjs/component';
     _this.isReady = false;
+    _this.isPreReady = false;
     _this.hasDataSize = false;
     _this.hasLoading = false;
+    _this.isSkip = false;
 
@@ -233,4 +235,5 @@ _this.onCheck = function (e) {
     _this.element = element;
-    _this.hasDataSize = hasSizeAttribute(_this.element, _this.options.prefix);
-    _this.hasLoading = hasLoadingAttribute(_this.element);
+    _this.hasDataSize = hasSizeAttribute(element, _this.options.prefix);
+    _this.hasLoading = hasLoadingAttribute(element);
+    _this.isSkip = hasSkipAttribute(_this.element);
     return _this;
@@ -242,3 +245,3 @@ }
   __proto.check = function () {
-    if (!this.checkElement()) {
+    if (this.isSkip || hasSkipAttribute(this.element) || !this.checkElement()) {
       // I'm Ready
@@ -253,3 +256,3 @@ this.onAlreadyReady(true);
 
-    if (this.hasDataSize || this.hasLoading || this.isPreReady()) {
+    if (this.hasDataSize || this.hasLoading) {
       // I'm Pre Ready
@@ -263,6 +266,2 @@ this.onAlreadyPreReady();
 
-  __proto.isPreReady = function () {
-    return false;
-  };
-
   __proto.addEvents = function () {
@@ -303,5 +302,11 @@ var _this = this;
   __proto.onPreReady = function () {
+    if (this.isPreReady) {
+      return;
+    }
+
+    this.isPreReady = true;
     this.trigger("preReady", {
       element: this.element,
-      hasLoading: this.hasLoading
+      hasLoading: this.hasLoading,
+      isSkip: this.isSkip
     });
@@ -311,2 +316,10 @@ };
   __proto.onReady = function (withPreReady) {
+    if (this.isReady) {
+      return;
+    }
+
+    if (withPreReady) {
+      this.isPreReady = true;
+    }
+
     this.removeAutoSizer();
@@ -317,3 +330,4 @@ this.isReady = true;
       withPreReady: withPreReady,
-      hasLoading: this.hasLoading
+      hasLoading: this.hasLoading,
+      isSkip: this.isSkip
     });
@@ -361,2 +375,6 @@ };
 
+  __proto.setHasLoading = function (hasLoading) {
+    this.hasLoading = hasLoading;
+  };
+
   __proto.checkElement = function () {
@@ -456,5 +474,3 @@ if (!this.hasDataSize) {
     this.clear();
-    this.elementInfos = toArray(elements).filter(function (element) {
-      return !hasSkipAttribute(element, prefix);
-    }).map(function (element, index) {
+    this.elementInfos = toArray(elements).map(function (element, index) {
       var loader = _this.getLoader(element, {
@@ -468,3 +484,5 @@ prefix: prefix
       }).on("preReady", function (e) {
-        _this.elementInfos[index].hasLoading = e.hasLoading;
+        var info = _this.elementInfos[index];
+        info.hasLoading = e.hasLoading;
+        info.isSkip = e.isSkip;
 
@@ -478,5 +496,8 @@ var isPreReady = _this.checkPreReady(index);
         var withPreReady = _a.withPreReady,
-            hasLoading = _a.hasLoading; // Pre-ready and ready occur simultaneously
+            hasLoading = _a.hasLoading,
+            isSkip = _a.isSkip; // Pre-ready and ready occur simultaneously
 
-        _this.elementInfos[index].hasLoading = hasLoading;
+        var info = _this.elementInfos[index];
+        info.hasLoading = hasLoading;
+        info.isSkip = isSkip;
 
@@ -500,3 +521,4 @@ var isPreReady = withPreReady && _this.checkPreReady(index);
         isPreReady: false,
-        isReady: false
+        isReady: false,
+        isSkip: false
       };
@@ -527,4 +549,4 @@ });
   /**
-   * Whether the elements are all pre-ready (all sizes are known)
-   * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부
+   * Whether the elements are all pre-ready. (all sizes are known)
+   * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부.
    */
@@ -539,4 +561,4 @@
   /**
-   * Whether the elements are all ready
-   * @ko 엘리먼트들이 모두 준비가 됐는지 여부
+   * Whether the elements are all ready.
+   * @ko 엘리먼트들이 모두 준비가 됐는지 여부.
    */
@@ -551,2 +573,11 @@
   /**
+   * Whether an error has occurred in the elements in the current state.
+   * @ko 현재 상태에서 엘리먼트들이 에러가 발생했는지 여부.
+   */
+
+
+  __proto.hasError = function () {
+    return this.totalErrorCount > 0;
+  };
+  /**
    * Clears events of elements being checked.
@@ -571,3 +602,3 @@ * @ko 체크 중인 엘리먼트들의 이벤트를 해제 한다.
   /**
-   * Destory all events .
+   * Destory all events.
    * @ko 모든 이벤트를 해제 한다.
@@ -594,2 +625,6 @@ */
     var loader = new ElementLoader(element, options);
+    var children = toArray(element.querySelectorAll(tags.join(", ")));
+    loader.setHasLoading(children.some(function (el) {
+      return hasLoadingAttribute(el);
+    }));
     var withPreReady = false;
@@ -603,4 +638,4 @@ var childrenImReady = this.clone().on("error", function (e) {
       // has not data size
-      var children = getContentElements(element, tags, _this.options.prefix);
-      childrenImReady.check(children).on("preReady", function (e) {
+      var contentElements = getContentElements(element, tags, _this.options.prefix);
+      childrenImReady.check(contentElements).on("preReady", function (e) {
         withPreReady = e.isReady;
@@ -616,3 +651,2 @@
       // check only video, image elements
-      var children = toArray(element.querySelectorAll(tags.join(", ")));
       childrenImReady.check(children);
@@ -710,2 +744,3 @@ }).on("requestDestroy", function () {
      * @param {boolean} [e.hasLoading] - Whether the loading attribute has been applied <ko>loading 속성이 적용되었는지 여부</ko>
+     * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
      * @example
@@ -743,3 +778,4 @@ * ```html
       isReady: this.isReady(),
-      hasLoading: info.hasLoading
+      hasLoading: info.hasLoading,
+      isSkip: info.isSkip
     });
@@ -808,2 +844,3 @@ };
      * @param {boolean} [e.isPreReadyOver] - Whether pre-ready is over <ko>사전 준비가 끝났는지 여부</ko>
+     * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
      * @example
@@ -845,3 +882,4 @@ * ```html
       hasLoading: info.hasLoading,
-      isPreReadyOver: this.isPreReadyOver
+      isPreReadyOver: this.isPreReadyOver,
+      isSkip: info.isSkip
     });
@@ -917,13 +955,9 @@ };
 
-  __proto.isPreReady = function () {
-    var element = this.element;
-    return element.complete && (!IS_IE || IS_IE && !!element.naturalWidth);
-  };
-
   __proto.checkElement = function () {
     var element = this.element;
+    var src = element.getAttribute("src");
 
-    if (this.isPreReady()) {
+    if (element.complete && src) {
       if (!element.naturalWidth) {
-        this.onAlreadyError(this.element);
+        this.onAlreadyError(element);
       }
@@ -935,3 +969,3 @@
     this.addEvents();
-    IS_IE && element.setAttribute("src", element.getAttribute("src"));
+    IS_IE && element.setAttribute("src", src);
     return true;
@@ -938,0 +972,0 @@ };

dist/imready.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/egjs-imready
-version: 1.0.0
+version: 1.1.0
 */
@@ -567,4 +567,6 @@ (function (global, factory) {
         _this.isReady = false;
+        _this.isPreReady = false;
         _this.hasDataSize = false;
         _this.hasLoading = false;
+        _this.isSkip = false;
 
@@ -588,4 +590,5 @@ _this.onCheck = function (e) {
         _this.element = element;
-        _this.hasDataSize = hasSizeAttribute(_this.element, _this.options.prefix);
-        _this.hasLoading = hasLoadingAttribute(_this.element);
+        _this.hasDataSize = hasSizeAttribute(element, _this.options.prefix);
+        _this.hasLoading = hasLoadingAttribute(element);
+        _this.isSkip = hasSkipAttribute(_this.element);
         return _this;
@@ -597,3 +600,3 @@ }
       __proto.check = function () {
-        if (!this.checkElement()) {
+        if (this.isSkip || hasSkipAttribute(this.element) || !this.checkElement()) {
           // I'm Ready
@@ -608,3 +611,3 @@ this.onAlreadyReady(true);
 
-        if (this.hasDataSize || this.hasLoading || this.isPreReady()) {
+        if (this.hasDataSize || this.hasLoading) {
           // I'm Pre Ready
@@ -618,6 +621,2 @@ this.onAlreadyPreReady();
 
-      __proto.isPreReady = function () {
-        return false;
-      };
-
       __proto.addEvents = function () {
@@ -658,5 +657,11 @@ var _this = this;
       __proto.onPreReady = function () {
+        if (this.isPreReady) {
+          return;
+        }
+
+        this.isPreReady = true;
         this.trigger("preReady", {
           element: this.element,
-          hasLoading: this.hasLoading
+          hasLoading: this.hasLoading,
+          isSkip: this.isSkip
         });
@@ -666,2 +671,10 @@ };
       __proto.onReady = function (withPreReady) {
+        if (this.isReady) {
+          return;
+        }
+
+        if (withPreReady) {
+          this.isPreReady = true;
+        }
+
         this.removeAutoSizer();
@@ -672,3 +685,4 @@ this.isReady = true;
           withPreReady: withPreReady,
-          hasLoading: this.hasLoading
+          hasLoading: this.hasLoading,
+          isSkip: this.isSkip
         });
@@ -716,2 +730,6 @@ };
 
+      __proto.setHasLoading = function (hasLoading) {
+        this.hasLoading = hasLoading;
+      };
+
       __proto.checkElement = function () {
@@ -811,5 +829,3 @@ if (!this.hasDataSize) {
         this.clear();
-        this.elementInfos = toArray(elements).filter(function (element) {
-          return !hasSkipAttribute(element, prefix);
-        }).map(function (element, index) {
+        this.elementInfos = toArray(elements).map(function (element, index) {
           var loader = _this.getLoader(element, {
@@ -823,3 +839,5 @@ prefix: prefix
           }).on("preReady", function (e) {
-            _this.elementInfos[index].hasLoading = e.hasLoading;
+            var info = _this.elementInfos[index];
+            info.hasLoading = e.hasLoading;
+            info.isSkip = e.isSkip;
 
@@ -833,5 +851,8 @@ var isPreReady = _this.checkPreReady(index);
             var withPreReady = _a.withPreReady,
-                hasLoading = _a.hasLoading; // Pre-ready and ready occur simultaneously
+                hasLoading = _a.hasLoading,
+                isSkip = _a.isSkip; // Pre-ready and ready occur simultaneously
 
-            _this.elementInfos[index].hasLoading = hasLoading;
+            var info = _this.elementInfos[index];
+            info.hasLoading = hasLoading;
+            info.isSkip = isSkip;
 
@@ -855,3 +876,4 @@ var isPreReady = withPreReady && _this.checkPreReady(index);
             isPreReady: false,
-            isReady: false
+            isReady: false,
+            isSkip: false
           };
@@ -882,4 +904,4 @@ });
       /**
-       * Whether the elements are all pre-ready (all sizes are known)
-       * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부
+       * Whether the elements are all pre-ready. (all sizes are known)
+       * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부.
        */
@@ -894,4 +916,4 @@
       /**
-       * Whether the elements are all ready
-       * @ko 엘리먼트들이 모두 준비가 됐는지 여부
+       * Whether the elements are all ready.
+       * @ko 엘리먼트들이 모두 준비가 됐는지 여부.
        */
@@ -906,2 +928,11 @@
       /**
+       * Whether an error has occurred in the elements in the current state.
+       * @ko 현재 상태에서 엘리먼트들이 에러가 발생했는지 여부.
+       */
+
+
+      __proto.hasError = function () {
+        return this.totalErrorCount > 0;
+      };
+      /**
        * Clears events of elements being checked.
@@ -926,3 +957,3 @@ * @ko 체크 중인 엘리먼트들의 이벤트를 해제 한다.
       /**
-       * Destory all events .
+       * Destory all events.
        * @ko 모든 이벤트를 해제 한다.
@@ -949,2 +980,6 @@ */
         var loader = new ElementLoader(element, options);
+        var children = toArray(element.querySelectorAll(tags.join(", ")));
+        loader.setHasLoading(children.some(function (el) {
+          return hasLoadingAttribute(el);
+        }));
         var withPreReady = false;
@@ -958,4 +993,4 @@ var childrenImReady = this.clone().on("error", function (e) {
           // has not data size
-          var children = getContentElements(element, tags, _this.options.prefix);
-          childrenImReady.check(children).on("preReady", function (e) {
+          var contentElements = getContentElements(element, tags, _this.options.prefix);
+          childrenImReady.check(contentElements).on("preReady", function (e) {
             withPreReady = e.isReady;
@@ -971,3 +1006,2 @@
           // check only video, image elements
-          var children = toArray(element.querySelectorAll(tags.join(", ")));
           childrenImReady.check(children);
@@ -1065,2 +1099,3 @@ }).on("requestDestroy", function () {
          * @param {boolean} [e.hasLoading] - Whether the loading attribute has been applied <ko>loading 속성이 적용되었는지 여부</ko>
+         * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
          * @example
@@ -1098,3 +1133,4 @@ * ```html
           isReady: this.isReady(),
-          hasLoading: info.hasLoading
+          hasLoading: info.hasLoading,
+          isSkip: info.isSkip
         });
@@ -1163,2 +1199,3 @@ };
          * @param {boolean} [e.isPreReadyOver] - Whether pre-ready is over <ko>사전 준비가 끝났는지 여부</ko>
+         * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
          * @example
@@ -1200,3 +1237,4 @@ * ```html
           hasLoading: info.hasLoading,
-          isPreReadyOver: this.isPreReadyOver
+          isPreReadyOver: this.isPreReadyOver,
+          isSkip: info.isSkip
         });
@@ -1272,13 +1310,9 @@ };
 
-      __proto.isPreReady = function () {
-        var element = this.element;
-        return element.complete && (!IS_IE || IS_IE && !!element.naturalWidth);
-      };
-
       __proto.checkElement = function () {
         var element = this.element;
+        var src = element.getAttribute("src");
 
-        if (this.isPreReady()) {
+        if (element.complete && src) {
           if (!element.naturalWidth) {
-            this.onAlreadyError(this.element);
+            this.onAlreadyError(element);
           }
@@ -1290,3 +1324,3 @@
         this.addEvents();
-        IS_IE && element.setAttribute("src", element.getAttribute("src"));
+        IS_IE && element.setAttribute("src", src);
         return true;
@@ -1293,0 +1327,0 @@ };

dist/imready.min.js

@@ -7,5 +7,5 @@ /*
 repository: https://github.com/naver/egjs-imready
-version: 1.0.0
+version: 1.1.0
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t=t||self).eg=t.eg||{},t.eg.ImReady=e())}(this,function(){"use strict";var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};function o(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var i=function(){return(i=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function d(t){return void 0===t}var t=function(){function t(){this.options={},this._eventHandler={}}var e=t.prototype;return e.trigger=function(t){for(var e=this,n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];if(!(0<(a=this._eventHandler[t]||[]).length))return!0;var o=n[0]||{},i=n.slice(1),a=a.concat(),s=!1;o.eventType=t,o.stop=function(){s=!0},o.currentTarget=this;var u=[o];return 1<=i.length&&(u=u.concat(i)),a.forEach(function(t){t.apply(e,u)}),!s},e.once=function(n,r){var o,i=this;if("object"==typeof n&&d(r)){var t,e=n;for(t in e)this.once(t,e[t]);return this}return"string"==typeof n&&"function"==typeof r&&(o=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];r.apply(i,t),i.off(n,o)},this.on(n,o)),this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&d(e)){var n,r=t;for(n in r)this.on(n,r[n]);return this}var o;return"string"==typeof t&&"function"==typeof e&&(d(o=this._eventHandler[t])&&(this._eventHandler[t]=[],o=this._eventHandler[t]),o.push(e)),this},e.off=function(t,e){var n,r;if(d(t))return this._eventHandler={},this;if(d(e)){if("string"==typeof t)return delete this._eventHandler[t],this;var o,i=t;for(o in i)this.off(o,i[o]);return this}var a=this._eventHandler[t];if(a){var s=0;try{for(var u=function(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}(a),h=u.next();!h.done;h=u.next()){if(h.value===e){a.splice(s,1);break}s++}}catch(t){n={error:t}}finally{try{h&&!h.done&&(r=u.return)&&r.call(u)}finally{if(n)throw n.error}}}return this},t.VERSION="2.2.2",t}(),e="undefined"!=typeof window,n=e?window.navigator.userAgent:"",a=e&&!!("getComputedStyle"in window),s=/MSIE|Trident|Windows Phone|Edge/.test(n),u=e&&!!("addEventListener"in document),h="width",l="height";function f(t,e){return t.getAttribute(e)||""}function c(t){return[].slice.call(t)}function y(t,e,n){u?t.addEventListener(e,n,!1):t.attachEvent?t.attachEvent("on"+e,n):t["on"+e]=n}function p(t,e,n){t.removeEventListener?t.removeEventListener(e,n,!1):t.detachEvent?t.detachEvent("on"+e,n):t["on"+e]=null}function v(t,e){var n=t["client"+e]||t["offset"+e];return parseFloat(n||(t=t,((a?window.getComputedStyle(t):t.currentStyle)||{})[e.toLowerCase()]))||0}function g(t,e,n){var r=c(t.querySelectorAll(function(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var r=Array(t),o=0,e=0;e<n;e++)for(var i=arguments[e],a=0,s=i.length;a<s;a++,o++)r[o]=i[a];return r}(["["+n+"skip] ["+n+"width]"],e.map(function(t){return["["+n+"skip] "+t,t+"["+n+"skip]","["+n+"width] "+t].join(", ")})).join(", ")));return c(t.querySelectorAll("["+n+"width], "+e.join(", "))).filter(function(t){return-1===r.indexOf(t)})}var R=[];function m(t,e){void 0===e&&(e="data-");var n,r=t.__PREFIX__||e,o=parseInt(f(t,""+r+h),10)||0,e=parseInt(f(t,""+r+l),10)||0;f(t,r+"fixed")===l?(n=v(t,"Height")||e,t.style[h]=o/e*n+"px"):(n=v(t,"Width")||o,t.style[l]=e/o*n+"px")}function E(){R.forEach(function(t){m(t)})}var C,e=function(r){function t(t,e){void 0===e&&(e={});var n=r.call(this)||this;return n.isReady=!1,n.hasDataSize=!1,n.hasLoading=!1,n.onCheck=function(t){n.destroy(),t&&"error"===t.type&&n.onError(n.element);t=!n.hasDataSize&&!n.hasLoading;n.onReady(t)},n.options=i({prefix:"data-"},e),n.element=t,n.hasDataSize=(e=n.element,void 0===(t=n.options.prefix)&&(t="data-"),!!e.getAttribute(t+"width")),n.hasLoading="loading"in(t=n.element)&&"lazy"===t.getAttribute("loading"),n}o(t,r);var e=t.prototype;return e.check=function(){return this.checkElement()?(this.hasDataSize&&(t=this.element,e=this.options.prefix,R.length||y(window,"resize",E),t.__PREFIX__=e,R.push(t),m(t)),(this.hasDataSize||this.hasLoading||this.isPreReady())&&this.onAlreadyPreReady(),!0):(this.onAlreadyReady(!0),!1);var t,e},e.isPreReady=function(){return!1},e.addEvents=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){y(n,t,e.onCheck)})},e.destroy=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){p(n,t,e.onCheck)}),this.removeAutoSizer()},e.removeAutoSizer=function(){var t,e,n;this.hasDataSize&&(n=this.options.prefix,t=this.element,e=n,(n=R.indexOf(t))<0||(e=f(t,e+"fixed"),delete t.__PREFIX__,t.style[e===l?h:l]="",R.splice(n,1),R.length||p(window,"resize",E)))},e.onError=function(t){this.trigger("error",{element:this.element,target:t})},e.onPreReady=function(){this.trigger("preReady",{element:this.element,hasLoading:this.hasLoading})},e.onReady=function(t){this.removeAutoSizer(),this.isReady=!0,this.trigger("ready",{element:this.element,withPreReady:t,hasLoading:this.hasLoading})},e.onAlreadyError=function(t){var e=this;setTimeout(function(){e.onError(t)})},e.onAlreadyPreReady=function(){var t=this;setTimeout(function(){t.onPreReady()})},e.onAlreadyReady=function(t){var e=this;setTimeout(function(){e.onReady(t)})},t.EVENTS=[],t}(t),P=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}o(e,t);var n=e.prototype;return n.checkElement=function(){return this.hasDataSize||this.trigger("requestChildren"),!0},n.destroy=function(){this.removeAutoSizer(),this.trigger("requestDestroy")},n.onAlreadyPreReady=function(){t.prototype.onAlreadyPreReady.call(this),this.trigger("reqeustReadyChildren")},e.EVENTS=[],e}(e),t=function(n){function t(t){void 0===t&&(t={});var e=n.call(this)||this;return e.readyCount=0,e.preReadyCount=0,e.totalCount=0,e.totalErrorCount=0,e.isPreReadyOver=!0,e.elementInfos=[],e.options=i({loaders:{},prefix:"data-"},t),e}o(t,n);var e=t.prototype;return e.check=function(t){var o=this,n=this.options.prefix;this.clear(),this.elementInfos=c(t).filter(function(t){return void 0===(e=n)&&(e="data-"),!t.getAttribute(e+"skip");var e}).map(function(t,r){var e=o.getLoader(t,{prefix:n});return e.check(),e.on("error",function(t){o.onError(r,t.target)}).on("preReady",function(t){o.elementInfos[r].hasLoading=t.hasLoading;t=o.checkPreReady(r);o.onPreReadyElement(r),t&&o.onPreReady()}).on("ready",function(t){var e=t.withPreReady,n=t.hasLoading;o.elementInfos[r].hasLoading=n;t=e&&o.checkPreReady(r),n=o.checkReady(r);e&&o.onPreReadyElement(r),o.onReadyElement(r),t&&o.onPreReady(),n&&o.onReady()}),{loader:e,element:t,hasLoading:!1,hasError:!1,isPreReady:!1,isReady:!1}});t=this.elementInfos.length;return(this.totalCount=t)||setTimeout(function(){o.onPreReady(),o.onReady()}),this},e.getTotalCount=function(){return this.totalCount},e.isPreReady=function(){return this.elementInfos.every(function(t){return t.isPreReady})},e.isReady=function(){return this.elementInfos.every(function(t){return t.isReady})},e.clear=function(){this.isPreReadyOver=!1,this.totalCount=0,this.preReadyCount=0,this.readyCount=0,this.totalErrorCount=0,this.elementInfos.forEach(function(t){!t.isReady&&t.loader&&t.loader.destroy()}),this.elementInfos=[]},e.destroy=function(){this.clear(),this.off()},e.getLoader=function(e,t){var n=this,r=e.tagName.toLowerCase(),o=this.options.loaders,i=Object.keys(o);if(o[r])return new o[r](e,t);var a=new P(e,t),s=!1,u=this.clone().on("error",function(t){a.onError(t.target)}).on("ready",function(){a.onReady(s)});return a.on("requestChildren",function(){var t=g(e,i,n.options.prefix);u.check(t).on("preReady",function(t){(s=t.isReady)||a.onPreReady()})}).on("reqeustReadyChildren",function(){var t=c(e.querySelectorAll(i.join(", ")));u.check(t)}).on("requestDestroy",function(){u.destroy()}),a},e.clone=function(){return new t(i({},this.options))},e.checkPreReady=function(t){return this.elementInfos[t].isPreReady=!0,++this.preReadyCount,!(this.preReadyCount<this.totalCount)},e.checkReady=function(t){return this.elementInfos[t].isReady=!0,++this.readyCount,!(this.readyCount<this.totalCount)},e.onError=function(t,e){var n=this.elementInfos[t];n.hasError=!0,this.trigger("error",{element:n.element,index:t,target:e,errorCount:this.getErrorCount(),totalErrorCount:++this.totalErrorCount})},e.onPreReadyElement=function(t){var e=this.elementInfos[t];this.trigger("preReadyElement",{element:e.element,index:t,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading})},e.onPreReady=function(){this.isPreReadyOver=!0,this.trigger("preReady",{readyCount:this.readyCount,totalCount:this.totalCount,isReady:this.isReady(),hasLoading:this.hasLoading()})},e.onReadyElement=function(t){var e=this.elementInfos[t];this.trigger("readyElement",{index:t,element:e.element,hasError:e.hasError,errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading,isPreReadyOver:this.isPreReadyOver})},e.onReady=function(){this.trigger("ready",{errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,totalCount:this.totalCount})},e.getErrorCount=function(){return this.elementInfos.filter(function(t){return t.hasError}).length},e.hasLoading=function(){return this.elementInfos.some(function(t){return t.hasLoading})},t}(t),_=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}o(e,t);var n=e.prototype;return n.isPreReady=function(){var t=this.element;return t.complete&&(!s||s&&!!t.naturalWidth)},n.checkElement=function(){var t=this.element;return this.isPreReady()?(t.naturalWidth||this.onAlreadyError(this.element),!1):(this.addEvents(),s&&t.setAttribute("src",t.getAttribute("src")),!0)},e.EVENTS=["load","error"],e}(e),L=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return o(e,t),e.prototype.checkElement=function(){var t=this.element;return!(1<=t.readyState)&&(t.error?(this.onAlreadyError(t),!1):(this.addEvents(),!0))},e.EVENTS=["loadedmetadata","error"],e}(e),w=function(e){function t(t){return void 0===t&&(t={}),e.call(this,i({loaders:{img:_,video:L}},t))||this}return o(t,e),t}(t),S={__proto__:null,default:w,Manager:t,VideoLoader:L,ImageLoader:_,Loader:e};for(C in S)w[C]=S[C];return w});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t=t||self).eg=t.eg||{},t.eg.ImReady=e())}(this,function(){"use strict";var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};function i(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var a=function(){return(a=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function d(t){return void 0===t}var t=function(){function t(){this.options={},this._eventHandler={}}var e=t.prototype;return e.trigger=function(t){for(var e=this,n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];if(!(0<(a=this._eventHandler[t]||[]).length))return!0;var o=n[0]||{},i=n.slice(1),a=a.concat(),s=!1;o.eventType=t,o.stop=function(){s=!0},o.currentTarget=this;var u=[o];return 1<=i.length&&(u=u.concat(i)),a.forEach(function(t){t.apply(e,u)}),!s},e.once=function(n,r){var o,i=this;if("object"==typeof n&&d(r)){var t,e=n;for(t in e)this.once(t,e[t]);return this}return"string"==typeof n&&"function"==typeof r&&(o=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];r.apply(i,t),i.off(n,o)},this.on(n,o)),this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&d(e)){var n,r=t;for(n in r)this.on(n,r[n]);return this}var o;return"string"==typeof t&&"function"==typeof e&&(d(o=this._eventHandler[t])&&(this._eventHandler[t]=[],o=this._eventHandler[t]),o.push(e)),this},e.off=function(t,e){var n,r;if(d(t))return this._eventHandler={},this;if(d(e)){if("string"==typeof t)return delete this._eventHandler[t],this;var o,i=t;for(o in i)this.off(o,i[o]);return this}var a=this._eventHandler[t];if(a){var s=0;try{for(var u=function(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}(a),h=u.next();!h.done;h=u.next()){if(h.value===e){a.splice(s,1);break}s++}}catch(t){n={error:t}}finally{try{h&&!h.done&&(r=u.return)&&r.call(u)}finally{if(n)throw n.error}}}return this},t.VERSION="2.2.2",t}(),e="undefined"!=typeof window,n=e?window.navigator.userAgent:"",o=e&&!!("getComputedStyle"in window),s=/MSIE|Trident|Windows Phone|Edge/.test(n),u=e&&!!("addEventListener"in document),h="width",c="height";function f(t,e){return t.getAttribute(e)||""}function l(t){return[].slice.call(t)}function y(t){return"loading"in t&&"lazy"===t.getAttribute("loading")}function p(t,e){return void 0===e&&(e="data-"),!!t.getAttribute(e+"skip")}function v(t,e,n){u?t.addEventListener(e,n,!1):t.attachEvent?t.attachEvent("on"+e,n):t["on"+e]=n}function g(t,e,n){t.removeEventListener?t.removeEventListener(e,n,!1):t.detachEvent?t.detachEvent("on"+e,n):t["on"+e]=null}function R(t,e){var n=t["client"+e]||t["offset"+e];return parseFloat(n||(t=t,((o?window.getComputedStyle(t):t.currentStyle)||{})[e.toLowerCase()]))||0}function m(t,e,n){var r=l(t.querySelectorAll(function(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var r=Array(t),o=0,e=0;e<n;e++)for(var i=arguments[e],a=0,s=i.length;a<s;a++,o++)r[o]=i[a];return r}(["["+n+"skip] ["+n+"width]"],e.map(function(t){return["["+n+"skip] "+t,t+"["+n+"skip]","["+n+"width] "+t].join(", ")})).join(", ")));return l(t.querySelectorAll("["+n+"width], "+e.join(", "))).filter(function(t){return-1===r.indexOf(t)})}var E=[];function C(t,e){void 0===e&&(e="data-");var n,r=t.__PREFIX__||e,o=parseInt(f(t,""+r+h),10)||0,e=parseInt(f(t,""+r+c),10)||0;f(t,r+"fixed")===c?(n=R(t,"Height")||e,t.style[h]=o/e*n+"px"):(n=R(t,"Width")||o,t.style[c]=e/o*n+"px")}function S(){E.forEach(function(t){C(t)})}var P,e=function(o){function t(t,e){void 0===e&&(e={});var n,r=o.call(this)||this;return r.isReady=!1,r.isPreReady=!1,r.hasDataSize=!1,r.hasLoading=!1,r.isSkip=!1,r.onCheck=function(t){r.destroy(),t&&"error"===t.type&&r.onError(r.element);t=!r.hasDataSize&&!r.hasLoading;r.onReady(t)},r.options=a({prefix:"data-"},e),r.element=t,r.hasDataSize=(n=t,void 0===(e=r.options.prefix)&&(e="data-"),!!n.getAttribute(e+"width")),r.hasLoading=y(t),r.isSkip=p(r.element),r}i(t,o);var e=t.prototype;return e.check=function(){return this.isSkip||p(this.element)||!this.checkElement()?(this.onAlreadyReady(!0),!1):(this.hasDataSize&&(t=this.element,e=this.options.prefix,E.length||v(window,"resize",S),t.__PREFIX__=e,E.push(t),C(t)),(this.hasDataSize||this.hasLoading)&&this.onAlreadyPreReady(),!0);var t,e},e.addEvents=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){v(n,t,e.onCheck)})},e.destroy=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){g(n,t,e.onCheck)}),this.removeAutoSizer()},e.removeAutoSizer=function(){var t,e,n;this.hasDataSize&&(n=this.options.prefix,t=this.element,e=n,(n=E.indexOf(t))<0||(e=f(t,e+"fixed"),delete t.__PREFIX__,t.style[e===c?h:c]="",E.splice(n,1),E.length||g(window,"resize",S)))},e.onError=function(t){this.trigger("error",{element:this.element,target:t})},e.onPreReady=function(){this.isPreReady||(this.isPreReady=!0,this.trigger("preReady",{element:this.element,hasLoading:this.hasLoading,isSkip:this.isSkip}))},e.onReady=function(t){this.isReady||(t&&(this.isPreReady=!0),this.removeAutoSizer(),this.isReady=!0,this.trigger("ready",{element:this.element,withPreReady:t,hasLoading:this.hasLoading,isSkip:this.isSkip}))},e.onAlreadyError=function(t){var e=this;setTimeout(function(){e.onError(t)})},e.onAlreadyPreReady=function(){var t=this;setTimeout(function(){t.onPreReady()})},e.onAlreadyReady=function(t){var e=this;setTimeout(function(){e.onReady(t)})},t.EVENTS=[],t}(t),k=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}i(e,t);var n=e.prototype;return n.setHasLoading=function(t){this.hasLoading=t},n.checkElement=function(){return this.hasDataSize||this.trigger("requestChildren"),!0},n.destroy=function(){this.removeAutoSizer(),this.trigger("requestDestroy")},n.onAlreadyPreReady=function(){t.prototype.onAlreadyPreReady.call(this),this.trigger("reqeustReadyChildren")},e.EVENTS=[],e}(e),t=function(n){function t(t){void 0===t&&(t={});var e=n.call(this)||this;return e.readyCount=0,e.preReadyCount=0,e.totalCount=0,e.totalErrorCount=0,e.isPreReadyOver=!0,e.elementInfos=[],e.options=a({loaders:{},prefix:"data-"},t),e}i(t,n);var e=t.prototype;return e.check=function(t){var i=this,n=this.options.prefix;this.clear(),this.elementInfos=l(t).map(function(t,o){var e=i.getLoader(t,{prefix:n});return e.check(),e.on("error",function(t){i.onError(o,t.target)}).on("preReady",function(t){var e=i.elementInfos[o];e.hasLoading=t.hasLoading,e.isSkip=t.isSkip;t=i.checkPreReady(o);i.onPreReadyElement(o),t&&i.onPreReady()}).on("ready",function(t){var e=t.withPreReady,n=t.hasLoading,r=t.isSkip,t=i.elementInfos[o];t.hasLoading=n,t.isSkip=r;t=e&&i.checkPreReady(o),r=i.checkReady(o);e&&i.onPreReadyElement(o),i.onReadyElement(o),t&&i.onPreReady(),r&&i.onReady()}),{loader:e,element:t,hasLoading:!1,hasError:!1,isPreReady:!1,isReady:!1,isSkip:!1}});t=this.elementInfos.length;return(this.totalCount=t)||setTimeout(function(){i.onPreReady(),i.onReady()}),this},e.getTotalCount=function(){return this.totalCount},e.isPreReady=function(){return this.elementInfos.every(function(t){return t.isPreReady})},e.isReady=function(){return this.elementInfos.every(function(t){return t.isReady})},e.hasError=function(){return 0<this.totalErrorCount},e.clear=function(){this.isPreReadyOver=!1,this.totalCount=0,this.preReadyCount=0,this.readyCount=0,this.totalErrorCount=0,this.elementInfos.forEach(function(t){!t.isReady&&t.loader&&t.loader.destroy()}),this.elementInfos=[]},e.destroy=function(){this.clear(),this.off()},e.getLoader=function(e,t){var n=this,r=e.tagName.toLowerCase(),o=this.options.loaders,i=Object.keys(o);if(o[r])return new o[r](e,t);var a=new k(e,t),s=l(e.querySelectorAll(i.join(", ")));a.setHasLoading(s.some(y));var u=!1,h=this.clone().on("error",function(t){a.onError(t.target)}).on("ready",function(){a.onReady(u)});return a.on("requestChildren",function(){var t=m(e,i,n.options.prefix);h.check(t).on("preReady",function(t){(u=t.isReady)||a.onPreReady()})}).on("reqeustReadyChildren",function(){h.check(s)}).on("requestDestroy",function(){h.destroy()}),a},e.clone=function(){return new t(a({},this.options))},e.checkPreReady=function(t){return this.elementInfos[t].isPreReady=!0,++this.preReadyCount,!(this.preReadyCount<this.totalCount)},e.checkReady=function(t){return this.elementInfos[t].isReady=!0,++this.readyCount,!(this.readyCount<this.totalCount)},e.onError=function(t,e){var n=this.elementInfos[t];n.hasError=!0,this.trigger("error",{element:n.element,index:t,target:e,errorCount:this.getErrorCount(),totalErrorCount:++this.totalErrorCount})},e.onPreReadyElement=function(t){var e=this.elementInfos[t];this.trigger("preReadyElement",{element:e.element,index:t,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading,isSkip:e.isSkip})},e.onPreReady=function(){this.isPreReadyOver=!0,this.trigger("preReady",{readyCount:this.readyCount,totalCount:this.totalCount,isReady:this.isReady(),hasLoading:this.hasLoading()})},e.onReadyElement=function(t){var e=this.elementInfos[t];this.trigger("readyElement",{index:t,element:e.element,hasError:e.hasError,errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading,isPreReadyOver:this.isPreReadyOver,isSkip:e.isSkip})},e.onReady=function(){this.trigger("ready",{errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,totalCount:this.totalCount})},e.getErrorCount=function(){return this.elementInfos.filter(function(t){return t.hasError}).length},e.hasLoading=function(){return this.elementInfos.some(function(t){return t.hasLoading})},t}(t),L=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return i(e,t),e.prototype.checkElement=function(){var t=this.element,e=t.getAttribute("src");return t.complete&&e?(t.naturalWidth||this.onAlreadyError(t),!1):(this.addEvents(),s&&t.setAttribute("src",e),!0)},e.EVENTS=["load","error"],e}(e),_=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return i(e,t),e.prototype.checkElement=function(){var t=this.element;return!(1<=t.readyState)&&(t.error?(this.onAlreadyError(t),!1):(this.addEvents(),!0))},e.EVENTS=["loadedmetadata","error"],e}(e),w=function(e){function t(t){return void 0===t&&(t={}),e.call(this,a({loaders:{img:L,video:_}},t))||this}return i(t,e),t}(t),A={__proto__:null,default:w,Manager:t,VideoLoader:_,ImageLoader:L,Loader:e};for(P in A)w[P]=A[P];return w});
 //# sourceMappingURL=imready.min.js.map

package.json

 {
 	"name": "@egjs/imready",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "This module is used to wait for the image or video to be ready.",
-	"main": "dist/imready.js",
+	"main": "dist/imready.cjs.js",
 	"module": "dist/imready.esm.js",
@@ -17,2 +17,3 @@ "types": "declaration/index.d.ts",
 		"coverage": "karma start --coverage && print-coveralls --sort=desc",
+		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
 		"printsizes": "print-sizes ./dist --exclude=\\.map",
@@ -23,3 +24,3 @@ "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
 		"demo:prebuild-latest": "cpx 'dist/**/*' demo/release/latest/dist --clean && cpx 'doc/**/*' demo/release/latest/doc --clean",
-		"demo:deploy": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/ --remote upstream",
+		"demo:deploy": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/ --add --remote upstream",
 		"release": "release-helper upstream"
@@ -57,2 +58,3 @@ },
 		"chai": "^4.2.0",
+		"coveralls": "^3.1.0",
 		"cpx": "^1.5.0",
@@ -59,0 +61,0 @@ "egjs-jsdoc-template": "^1.4.4",

README.md

@@ -8,3 +8,3 @@ <p align="middle" ><img src="./demo/images/logo.png"/></p>
 <a href="https://coveralls.io/github/naver/egjs-imready?branch=main&style=flat-square" target="_blank"><img alt="Coveralls github" src="https://img.shields.io/coveralls/github/naver/egjs-imready.svg?style=flat-square&label=%E2%9C%85%20coverage"></a>
-<a href="https://github.com/naver/egjs-imready/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/naver/egjs-imready.svg?style=flat-square&label=license&color=08CE5D"/></a>
+<a href="https://github.com/naver/egjs-imready/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/static/v1?style=flat-square&label=license&message=MIT&color=08CE5D"/></a>
 <a href="https://github.com/naver/egjs-imready/tree/main/packages/react-imready" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
@@ -55,3 +55,8 @@ </p>
 
-
+* When the `loading="lazy"` attribute is used, the `preReadyElement`(hasLoading=true) event occurs and the size is 0. When loading is complete, the `readyElement`(hasLoading=true) event occurs and you can get the size.
+```html
+<img src="..." />
+<img src="..." />
+<img src="..." loading="lazy" />
+```
 * If you use `data-width` and `data-height` attributes, the size of self, child image, and video elements is automatically adjusted until loading is complete.
@@ -66,3 +71,3 @@ ```html
 
-* If you use `data-skip="ture"` attribute, you can omit it even if there are images in itself and child image, and video elements.
+* If you use `data-skip="true"` attribute, you can omit it even if there are images in itself and child image, and video elements.
 ```html
@@ -69,0 +74,0 @@ <div data-skip="true">

src/ImReadyManager.ts

@@ -9,3 +9,3 @@ /*
 import { ArrayFormat, ElementInfo, ImReadyEvents, ImReadyLoaderOptions, ImReadyOptions } from "./types";
-import { hasSkipAttribute, toArray, getContentElements } from "./utils";
+import { toArray, getContentElements, hasLoadingAttribute } from "./utils";
 /**
@@ -65,5 +65,3 @@ * @alias eg.ImReady
     this.clear();
-    this.elementInfos = toArray(elements).filter(element => {
-      return !hasSkipAttribute(element, prefix);
-    }).map((element, index) => {
+    this.elementInfos = toArray(elements).map((element, index) => {
       const loader = this.getLoader(element, { prefix });
@@ -75,3 +73,6 @@
       }).on("preReady", e => {
-        this.elementInfos[index].hasLoading = e.hasLoading;
+        const info = this.elementInfos[index];
+
+        info.hasLoading = e.hasLoading;
+        info.isSkip = e.isSkip;
         const isPreReady = this.checkPreReady(index);
@@ -82,5 +83,9 @@
         isPreReady && this.onPreReady();
-      }).on("ready", ({ withPreReady, hasLoading }) => {
+      }).on("ready", ({ withPreReady, hasLoading, isSkip }) => {
         // Pre-ready and ready occur simultaneously
-        this.elementInfos[index].hasLoading = hasLoading;
+        const info = this.elementInfos[index];
+
+        info.hasLoading = hasLoading;
+        info.isSkip = isSkip;
+
         const isPreReady = withPreReady && this.checkPreReady(index);
@@ -103,2 +108,3 @@ const isReady = this.checkReady(index);
         isReady: false,
+        isSkip: false,
       };
@@ -126,4 +132,4 @@ });
   /**
-   * Whether the elements are all pre-ready (all sizes are known)
-   * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부
+   * Whether the elements are all pre-ready. (all sizes are known)
+   * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부.
    */
@@ -134,4 +140,4 @@ public isPreReady() {
   /**
-   * Whether the elements are all ready
-   * @ko 엘리먼트들이 모두 준비가 됐는지 여부
+   * Whether the elements are all ready.
+   * @ko 엘리먼트들이 모두 준비가 됐는지 여부.
    */
@@ -142,2 +148,9 @@ public isReady() {
   /**
+   * Whether an error has occurred in the elements in the current state.
+   * @ko 현재 상태에서 엘리먼트들이 에러가 발생했는지 여부.
+   */
+  public hasError() {
+    return this.totalErrorCount > 0;
+  }
+  /**
    * Clears events of elements being checked.
@@ -160,3 +173,3 @@ * @ko 체크 중인 엘리먼트들의 이벤트를 해제 한다.
   /**
-   * Destory all events .
+   * Destory all events.
    * @ko 모든 이벤트를 해제 한다.
@@ -177,2 +190,5 @@ */
     const loader = new ElementLoader(element, options);
+    const children = toArray(element.querySelectorAll<HTMLElement>(tags.join(", ")));
+
+    loader.setHasLoading(children.some(el => hasLoadingAttribute(el)));
     let withPreReady = false;
@@ -188,5 +204,5 @@
       // has not data size
-      const children = getContentElements(element, tags, this.options.prefix);
+      const contentElements = getContentElements(element, tags, this.options.prefix);
 
-      childrenImReady.check(children).on("preReady", e => {
+      childrenImReady.check(contentElements).on("preReady", e => {
         withPreReady = e.isReady;
@@ -201,4 +217,2 @@ if (!withPreReady) {
       // check only video, image elements
-      const children = toArray(element.querySelectorAll<HTMLElement>(tags.join(", ")));
-
       childrenImReady.check(children);
@@ -293,2 +307,3 @@ }).on("requestDestroy", () => {
      * @param {boolean} [e.hasLoading] - Whether the loading attribute has been applied <ko>loading 속성이 적용되었는지 여부</ko>
+     * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
      * @example
@@ -328,2 +343,3 @@ * ```html
       hasLoading: info.hasLoading,
+      isSkip: info.isSkip,
     });
@@ -389,2 +405,3 @@ }
      * @param {boolean} [e.isPreReadyOver] - Whether pre-ready is over <ko>사전 준비가 끝났는지 여부</ko>
+     * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
      * @example
@@ -430,2 +447,3 @@ * ```html
       isPreReadyOver: this.isPreReadyOver,
+      isSkip: info.isSkip,
     });
@@ -432,0 +450,0 @@ }

src/loaders/ElementLoader.ts

@@ -14,2 +14,5 @@ /*
 
+  public setHasLoading(hasLoading: boolean) {
+    this.hasLoading = hasLoading;
+  }
   public checkElement() {
@@ -16,0 +19,0 @@ if (!this.hasDataSize) {

src/loaders/ImageLoader.ts

@@ -11,11 +11,8 @@ /*
   public static EVENTS = ["load", "error"];
-  public isPreReady() {
-    const element = this.element;
-    return element.complete && (!IS_IE || (IS_IE && !!element.naturalWidth));
-  }
   public checkElement() {
     const element = this.element;
-    if (this.isPreReady()) {
+    const src = element.getAttribute("src");
+    if (element.complete && src) {
       if (!element.naturalWidth) {
-        this.onAlreadyError(this.element);
+        this.onAlreadyError(element);
       }
@@ -25,5 +22,5 @@ return false;
     this.addEvents();
-    IS_IE && element.setAttribute("src", element.getAttribute("src") as string);
+    IS_IE && element.setAttribute("src", src!);
     return true;
   }
 }

src/loaders/Loader.ts

@@ -9,3 +9,3 @@ /*
 import { ImReadyLoaderEvents, ImReadyLoaderOptions } from "../types";
-import { removeEvent, hasSizeAttribute, hasLoadingAttribute, addEvent } from "../utils";
+import { removeEvent, hasSizeAttribute, hasLoadingAttribute, addEvent, hasSkipAttribute } from "../utils";
 
@@ -19,4 +19,6 @@
   protected isReady = false;
+  protected isPreReady = false;
   protected hasDataSize = false;
   protected hasLoading = false;
+  protected isSkip = false;
 
@@ -30,7 +32,8 @@ constructor(element: HTMLElement, options: Partial<ImReadyLoaderOptions> = {}) {
     this.element = element as T;
-    this.hasDataSize = hasSizeAttribute(this.element, this.options.prefix);
-    this.hasLoading = hasLoadingAttribute(this.element);
+    this.hasDataSize = hasSizeAttribute(element, this.options.prefix);
+    this.hasLoading = hasLoadingAttribute(element);
+    this.isSkip = hasSkipAttribute(this.element);
   }
   public check() {
-    if (!this.checkElement()) {
+    if (this.isSkip || hasSkipAttribute(this.element) || !this.checkElement()) {
       // I'm Ready
@@ -44,3 +47,3 @@ this.onAlreadyReady(true);
     }
-    if (this.hasDataSize || this.hasLoading || this.isPreReady()) {
+    if (this.hasDataSize || this.hasLoading) {
       // I'm Pre Ready
@@ -52,5 +55,2 @@ this.onAlreadyPreReady();
   }
-  public isPreReady() {
-    return false;
-  }
   public addEvents() {
@@ -96,8 +96,19 @@ const element = this.element;
   public onPreReady() {
+    if (this.isPreReady) {
+      return;
+    }
+    this.isPreReady = true;
     this.trigger("preReady", {
       element: this.element,
       hasLoading: this.hasLoading,
+      isSkip: this.isSkip,
     });
   }
   public onReady(withPreReady: boolean) {
+    if (this.isReady) {
+      return;
+    }
+    if (withPreReady) {
+      this.isPreReady = true;
+    }
     this.removeAutoSizer();
@@ -109,2 +120,3 @@ this.isReady = true;
       hasLoading: this.hasLoading,
+      isSkip: this.isSkip,
     });
@@ -111,0 +123,0 @@ }

src/types.ts

@@ -38,2 +38,3 @@ /*
   isReady: boolean;
+  isSkip: boolean;
 }
@@ -83,2 +84,4 @@
   isReady: boolean;
+
+  isSkip: boolean;
 };
@@ -106,2 +109,3 @@
   isPreReadyOver: boolean;
+  isSkip: boolean;
 };
@@ -157,2 +161,3 @@
   hasLoading: boolean;
+  isSkip: boolean;
 }
@@ -167,2 +172,3 @@ /**
   hasLoading: boolean;
+  isSkip: boolean;
 }
@@ -169,0 +175,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

363423

increased by3.48%

Lines of code

4276

increased by3.14%

Number of lines in readme file

206

increased by2.49%

Worsened metrics

Dev dependency count

35

increased by2.94%

No dependency changes