Breaking News: Grepper is joining You.com. Read the official announcement!

js image loader

MattDESTROYER answered on November 10, 2022 Popularity 10/10 Helpfulness 4/10

answer js image loader

js image loader

Comment

// Array of images to load.
const images = [
	"path/to/image.extension",
	"/images/someimage.png",
	"./images/anotherimage.jpg",
	"../separatefolder/assets/onelastimage.gif"
];

// Function to load an image.
function loadImage(src) {
	return new Promise(function(res, rej) {
		const image = new Image();
		function loadCallback() {
			image.removeEventListener("load", loadCallback);
			image.removeEventListener("error", errorCallback);
			res(image);
		}
		function errorCallback() {
			image.removeEventListener("load", loadCallback);
			image.removeEventListener("error", errorCallback);
			rej(image);
		}
		image.addEventListener("load", loadCallback);
		image.addEventListener("error", errorCallback);
		image.src = src;
	});
}

// Function to load multiple images.
function loadImages(...srcs) {
	const promises = [];
	for (let i = 0; i < srcs.length; i++) {
		promises.push(loadImage(srcs[i]));
	}
	return Promise.all(promises);
}

// Load the images in the images array and print them to the console.
loadImages(...images).then(console.log);

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript load wait

Link to this answer
Share Copy Link

Contributed on Nov 10 2022

MattDESTROYER

0 Answers Avg Quality 2/10

js image loader

Contents

More Related Answers

js image loader

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.