preloadify

Preloadify

A dead simple image preloader for the web.
Zero dependecies, super lightweight.
Requires ES6 promises to work.

Installation

Preloadify can be installed in ES Modules syntax:

import preloadify from "preloadify"

as a script tag:

<script src="https://cdn.jsdelivr.net/npm/preloadify@latest/dist/index.min.js"></script>
<script>
    preloadify = preloadify.default; // Initalize
</script>

as a commonjs module:

const {preloadify} = require("preloadify");

and as a AMD require:

require(['preloadify'], function ({preloadify}) {
  preloadify(...);
});

API ‍

As said earlier, this package is dead simple.

async function dummyFunc() {
    await preloadify([src1, src2]);
    // OR
    await preloadify('src1');
    // Images are preloaded 🎉
    // <img src="src1"> will instantly load the image
}
function dummyFunc() {
    preloadify([src1, src2]).then(() => {
        // Images are preloaded 🎉
    })
}

As easy as that.
There is a also an optional 'options' argument.
It can have two properties:
oneach:

preloadify([src1, src2], {
    oneach(src) {
        // Called when a single image fully loads
        // and passes in that image's src
        console.log(`Image with source ${src} was loaded`);
    }
});

onprogress:

preloadify([src1, src2], {
    onprogress(percents, [done, total]) {
        // Called the same time as oneach
        // Provides info on loading progress
        console.log(`Loading: ${percents}%`);
        // OR
        console.log(`Loading: ${done} of ${total}}`);
    }
});

Easy, right?