naver / egjs-imready Goto Github PK

Description

It is necessary to use a polyfill according to the browser coverage or use an alternative method.

Steps to check or reproduce

Description

https://v3.vuejs.org/api/composition-api.html#setup

Steps to check or reproduce

Description

<div data-skip="true">
</div>

import ImReady from "@egjs/imready";
new ImReady().check(document.querySelectorAll("div")).on("ready", e => {
   // expected to be 1. but 0
   console.log(e.totalCount);
});

Steps to check or reproduce

Description

https://angular.io/guide/attribute-directives

Support Angular

Steps to check or reproduce

Description

Steps to check or reproduce

Description

I need a method to know if an error has occurred.

import ImReady from "@egjs/imready";

const im = new ImReady();

im.check();
// ...

setTimeout(() => {
     console.log(im.hasError());
});

Steps to check or reproduce

Description

<img src="...." />

• preReady => ready

<img data-src="...." />

• no event occur

Like native loading, preReady should also occur.

Steps to check or reproduce

Description

new ImReady({
    prefix: "data-grid-",
});

Steps to check or reproduce

Description

Support Vue 2 Hooks

Steps to check or reproduce

Description

I will insert img element

<img />

• Already in the body:
  • All browsers: (complete: true)
• insert to the body via javascript
  • Chrome: (complete: false)
  • Safari, Firefox (complete: true)

Steps to check or reproduce

Description

<div>
   <img loading="lazy" />
   <img />
</div>

When loading images and non-loading images are used together, preReady occurs immediately.

import ImReady from "@egjs/imready";

const im = new ImReady();

im.check([div]).on("preReady", () => {
    // error size
    console.log(div.offsetWidth, div.offsetHeight);
});

Steps to check or reproduce

Description

<div>
    <img loading="lazy">
</div>

import ImReady from "@egjs/imready";
new ImReady().check(document.querySelectorAll("div")).on("readyElement", e => {
   // expected to be true. but false 
   console.log(e.hasLoading);
});

Steps to check or reproduce

Description

ImReady is not constructor.

import ImReady from "@egjs/imready";

ImReady; // { default: constructor }

exports.deafult = ImReady;
=>
module.exports = ImReady;

Steps to check or reproduce

Description

If you destroy before preReady occurs, an error occurs.

Cannot set property 'hasLoading' of undefined 

Steps to check or reproduce

Description

<img data-lazy-src="..." data-lazy="true" />

Steps to check or reproduce