Are you Ready?

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>
    

Vue2

import Vue from "vue";
import VueCompositionAPI from '@vue/composition-api';

// @vue/composition-api is required to use vue2-imready.
Vue.use(VueCompositionAPI);

<template>
    <div class="page">
        <div class="background" ref="container">
            <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/vue2-imready";

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

Angular

<div class="page" NgxImReady selector="img" (ready)="onReady($event)" (readyElement)="onReadyElement($event)">
    <div class="background" NgxImReadyRegister>
        <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>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    title = 'ngx-imready';
    public isReady = false;
    public totalCount = 0;
    public readyCount = 0;
    onReadyElement(e) {
        this.readyCount = e.readyCount;
        this.totalCount = e.totalCount;
    }
    onReady(e) {
        this.isReady = e.isReady;
    }
}

Svelte

<script>
import { useReadyElement } from "@egjs/svelte-imready";

const { register, readyCount, totalCount, isReady } = useReadyElement({
    selector: "img",
});
</script>
<div class="page">
    <div class="background" use:register>
        <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>