Home / Questions / 24114
Accepted
Arnau Castellví
Asked: 2020-09-17 14:43:15 +0800 CST 2020-09-17 14:43:15 +0800 CST

Know when the browser has processed an image after loading it

  • 772

I would like to know if there is any way to know when the browser has finished processing an image after loading it, let me explain:
When you enter an image, you can know when it has finished loading it with the property completeor the method onloadof the object, but between the loads and displays it, it takes some time, since it must process it (for example, resize it), so that in "very" large images, even if the browser claims to have finished loading the image, it may not be displayed immediately . Here I leave an example of what I mean, by log it shows a message when it loads, but it takes a while for the image to appear.
Example using the method onload:

	var imagen;
	ponImagenTocha();
	function ponImagenTocha(){
		imagen=document.createElement("IMG");
		imagen.height=200;
		imagen.src="http://orig09.deviantart.net/5e53/f/2013/347/f/d/i_don_t_want_to_ever_leave_the_lake_district_by_martinkantauskas-d6xrdch.jpg";
		imagen.onload=function(){esperarImagen();};
	}
	function esperarImagen(){
			console.log("Completo.");
			document.body.appendChild(imagen);
	}

Example with the property complete:

	var imagen;
	ponImagenTocha();
	function ponImagenTocha(){
		imagen=document.createElement("IMG");
		imagen.height=200;
		imagen.src="http://orig09.deviantart.net/5e53/f/2013/347/f/d/i_don_t_want_to_ever_leave_the_lake_district_by_martinkantauskas-d6xrdch.jpg";
		esperarImagen();
	}
	function esperarImagen(){
		if (!imagen.complete){
			console.log("Cargando...");
			setTimeout(function(){
				esperarImagen();
			},16);
		} else {
			console.log("Completo.");
			document.body.appendChild(imagen);
		}
	}

javascript

1 Answers

  1. Best Answer

    Thanks to user @Kaiido from stackoverwlow in English, I have solved the problem by creating a canvas with the image, since the browser expects it to finish. This is an example of a function to wait for an image (or an array of images) to load:

    var imagesList=["https://omastewitkowski.files.wordpress.com/2013/07/howard-prairie-lake-oregon-omaste-witkowski-owfotografik-com-2-2.jpg",
		"http://orig03.deviantart.net/7b8d/f/2015/289/0/f/0ffd635880709fb39c2b69f782de9663-d9d9w6l.jpg",
		"http://www.livandiz.com/dpr/Crater%20Lake%20Pano%2016799x5507.JPG"];
var BIGimages=loadImages(imagesList);
onLoadImages(BIGimages,showImages);

function loadImages(listImages){
	var image;
	var list=[];
	for (var i=0;i<listImages.length;i++){
		image=document.createElement("IMG");
		image.height=200;
		image.src=listImages[i]+"?"+Math.random();
		list.push(image);
	}
	return list;		
}

function showImages(){
	loading.style.display="none";
	for (var i=0; i<BIGimages.length;i++){
		document.body.appendChild(BIGimages[i]);
	}
};

function onLoadImages(images,callBack,n) {
	if (images==undefined) return null;
	if (callBack==undefined) callBack=function(){};
	else if (typeof callBack!="function") return null;
	var list=[];
	if (!Array.isArray(images)){
		if (typeof images =="string") images=document.getElementById(images);
		if (!images || images.tagName!="IMG") return null;
		list.push(images);
	} else list=images;
	if (n==undefined || n<0 || n>=list.length) n=0;
	for (var i=n; i<list.length; i++){
		if (!list[i].complete){
			setTimeout(function(){onLoadImages(images,callBack,i);},16);
			return false;
		}
		var ctx = document.createElement('canvas').getContext('2d');
		ctx.drawImage(list[i], 0, 0);
	}
	callBack();
	return true;
}
    <DIV id="loading">Loading some big images...</DIV>

    • 2