Are you Ready?

0%

npm version React Vue

I'm Ready to check if the images or videos are loaded!

Download API

How to use

Vanilla


import ImReady from "@egjs/imready";

const im = new ImReady();

im.check(document.querySelectorAll("img")).on("readyElement", e => {
    progressElement.innerHTML = `${Math.floor(e.readyCount / e.totalCount * 100)}%`;
}).on("ready", e => {
    titleElement.innerHTML = "I'm Ready!";
});
    

React


import { useImReady, useReadyElement } from "@egjs/react-imready";

function App() {
    const { register, isReady, readyCount, totalCount } = useReadyElement({
        selector: "img",
    });

    return (<div className="page">
        <div className="background" ref={register()}>
            <img src="..." />
            <img src="..." />
            <img src="..." />
            <img src="..." />
            <img src="..." />
            <img src="..." />
        </div>
        <div class="container">
            <h1>{isReady ? "Are you Ready?" : "I'm Ready"}</h1>
            <p class="progress">{totalCount ? Math.floor(readyCount / totalCount * 100) : 0}%</p>
        </div>
    </div>);
}
    

Vue


<template>
    <div class="page">
        <div class="background" v-bind:ref="im.register()">
            <img src="..." />
            <img src="..." />
            <img src="..." />
            <img src="..." />
            <img src="..." />
            <img src="..." />
        </div>
        <div class="container">
            <h1>{{im.isReady ? "Are you Ready?" : "I'm Ready"}}</h1>
            <p class="progress">{{im.totalCount ? Math.floor(im.readyCount / im.totalCount * 100) : 0}}%</p>
        </div>
    </div>
</template>
<script>
import { useImReady, useReadyElement } from "@egjs/vue-imready";

export default {
    setup() {
        const im = useReadyElement({
            selector: "img",
        });
        return {
            im,
        };
    },
}
</script>