HTML

js wait for images to load

// 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);

javascript wait for image to load

<!-- new Image(); -->
<script>
	const image = new Image();
	// make sure onload is set before src is set
	image.onload = function() {
		console.log("Image loaded:", image.src);
	};
	image.src = "image url";
</script>
<!-- <img> -->
<img id="img" src="image url"></img>
<script>
	const img = document.getElementById("img");
	img.onload = function() {
		 console.log("Image loaded:", img.src);
	};
</script>

javascript wait image load complete

const loadImage = src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  })  
;

loadImage("http://placekitten.com/90/100").then(image => 
  console.log(image, `
loaded? ${image.complete}`)
);
Kod parçacığını çalıştır

javascript wait image load complete

const loadImage = src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  })  
;

const imageUrls = [
  "http://placekitten.com/85/150",
  "http://placekitten.com/85/130",
  "http://placekitten.com/85/110",
];
Promise.all(imageUrls.map(loadImage)).then(images => {
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const ctx = canvas.getContext("2d");
  images.forEach((image, i) =>
    ctx.drawImage(image, i * 90, 0, image.width, image.height)
  );
});
Kod parçacığını çalıştır