A static class in javascript that can preload images using promises in a async manner so your main thread would not hang or slow down.
as lots of us already know that javascript is a single threaded language but in javascript you can do multiple operation in a single thread async.
async meaning you can run multiple operation in parallel without disturbing main thread which is mainly UI thread in javascript.
promises is one way to do operation in async manner
learn more about promises
below is my solution to preload images in a async manner in javascript
//preloading images using javascript
class Loader
{
constructor()
{
this.progressCallBack=undefined;
}
//load all images in aysnc manner
//load multiple images
static async loadImages(args) {
//a promiseArray that can hold all Promises
let promiseStack = [];
//total images u want to load
const totalImages = args.length;
//number of images loading
let loadedImages = 0;
for (let i = 0; i < totalImages; i++) {
promiseStack.push(
new Promise((accept, reject) => {
const image = new Image();
image.src = args[i];
//on each image load progess how many images you loaded yet
image.onload = evt => {
loadedImages++;
const per = Number((loadedImages * 100) / totalImages);
if (this.progressCallBack) {
this.progressCallBack(per);
}
accept(evt);
};
//reject the promise a console back a message when a image failed to load
image.onerror=evt=>{
console.warn(`this image is not loaded=>${evt.target.src}`);
}
})
);
}
//reslove all promise all send send back boolean you can check that all images loaded successfully
return new Promise((accept, recject) => {
Promise.all(promiseStack)
.then(r => {
accept(true);
})
.catch(Error => {
reject("some images missed")
});
});
}
}
//now load images in a async manner
const images=["https://picsum.photos/id/237/200/32",
"https://picsum.photos/seed/picsum/200/300",
"https://picsum.photos/200/300?grayscale",
"https://picsum.photos/200/300/?blur",
"https://ragingbanana.files.wordpress.com/2015/03/35f7d4fa3fdf5ae46be107004f93497a.png",
"https://www.spottedzebra.us/img/posts/2013-05-20-XAML%20Spritesheet%20Animation/scared-owl-spritesheet.png"
]
Loader.loadImages(images).then((r)=>{
// console.log(r);
})
Loader.progressCallBack=(p)=>{
this.p=p;
// console.log(this.p);
}
working link -->
Comments
Post a Comment