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?