如何知道浏览器何时完成加载后处理图像？ [英] How to know when browser finish to process an image after loading it?

问题描述

创建图像对象时，可以使用完整属性或onload方法知道何时完全加载，然后，使用一段时间处理此图像（例如调整大小），这可能是几秒钟在大文件中。

如何知道浏览器何时完成处理图片加载后？


编辑：在示例中可以看到完整消息与图像外观之间的滞后，我想避免这种情况。


示例ussingonload方法：

  var BIGimage; putBIGimage（）; function putBIGimage（）{BIGimage = document.createElement（IMG）; BIGimage.height = 200; BIGimage.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; BIGimage.onload =函数（）{waitBIGimage（）;}; function waitBIGimage（）{console.log（Complete。）; document.body.appendChild（BIGimage）; }  

使用完整属性的示例：

  var BIGimage; putBIGimage（）; function putBIGimage（）{BIGimage = document.createElement（IMG）; BIGimage.height = 200; BIGimage.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; waitBIGimage（）; function waitBIGimage（）{if（！BIGimage.complete）{console.log（Loading ...）;的setTimeout（函数（）{waitBIGimage（）;}，16）; } else {console.log（Complete。）; document.body.appendChild（BIGimage）; }  

编辑：谢谢@Kaiido的回应我做了这个解决方案等待图像处理。

  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（图像）; } return list; function showImages（）{loading.style.display =none; for（var i = 0; i< BIGimages.length; i ++）{document.body.appendChild（BIGimages [i]）;函数onLoadImages（images，callBack，n）{if（images == undefined）返回null; if（callBack == undefined）callBack = function（）{}; else if（typeof callBack！=function）返回null; var list = []; if（！Array.isArray（images））{if（typeof images ==string）images = document.getElementById（images）; if（！images || images.tagName！=IMG）返回null; list.push（图像）; } 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）;返回false; } var ctx = document.createElement（'canvas'）。getContext（'2d'）; ctx.drawImage（list [i]，0,0）; }\t打回来（）; return true;}  

 < DIV id =loading >加载一些大图片......< / DIV>  

解决方案

这是一种方式。

CanvasContext2D drawImage 方法是同步的。
在能够使用此方法之前，浏览器必须完全呈现图像。

因此您可以将它用作<$ c中的等待方法$ c> waitBIGimage 方法。

  var BIGimage ; putBIGimage（）; function putBIGimage（）{BIGimage = document.createElement（IMG）; BIGimage.height = 200; BIGimage.src =\"······················· + Math.random（）; BIGimage.onload = waitBIGimage;} function waitBIGimage（）{//仅用于演示//我们还必须记录时间，因为在处理var start = performance.now（）期间甚至会阻止console.log方法。 console.log（'waiting'，start）; //这是所有需要的var ctx = document.createElement（'canvas'）。getContext（'2d'）; ctx.drawImage（this，0,0）; //仅演示var end = performance.now（）; console.log（完成。，结束）; console.log（`花了$ {end  -  start} ms`）//做你的东西document.body.appendChild（BIGimage）;}  

在我的Firefox上处理图像大约需要1秒钟，而在我的Chrome上，似乎在onload事件触发时图像已经被处理。 / p>

When an image object is created, can know when is fully loaded using the "complete" property, or the "onload" method, then, this image has processed ( resizing for example ) using some time, that can be some seconds in big files.
How to know when browser finish to process an image after loading it?

EDIT: In examples can see a lag between "complete" message and the appearance of the image, I want avoid this.

Example ussing "onload" method:

var BIGimage;
	putBIGimage();
	function putBIGimage(){
		BIGimage=document.createElement("IMG");
		BIGimage.height=200;
		BIGimage.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";
		BIGimage.onload=function(){waitBIGimage();};
	}
	function waitBIGimage(){
			console.log("Complete.");
			document.body.appendChild(BIGimage);
	}

Example using "complete" property:

var BIGimage;
	putBIGimage();
	function putBIGimage(){
		BIGimage=document.createElement("IMG");
		BIGimage.height=200;
		BIGimage.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";
		waitBIGimage();
	}
	function waitBIGimage(){
		if (!BIGimage.complete){
			console.log("Loading...");
			setTimeout(function(){
				waitBIGimage();
			},16);
		} else {
			console.log("Complete.");
			document.body.appendChild(BIGimage);
		}
	}

EDIT: Thanks the @Kaiido's response I made this sollution for wait the images process.

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>

解决方案

Here is one way.

CanvasContext2D drawImage method is synchronous. Before being able to use this method, the browser has to completely render the image.

So you can use it as a waiting method in your waitBIGimage method.

var BIGimage;
putBIGimage();

function putBIGimage() {
  BIGimage = document.createElement("IMG");
  BIGimage.height = 200;
  BIGimage.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?" + Math.random();
  BIGimage.onload = waitBIGimage;
}

function waitBIGimage() {
  // only for demo
  // we've got to also log the time since even the console.log method will be blocked during processing
  var start = performance.now();
  console.log('waiting', start);

  // this is all needed
  var ctx = document.createElement('canvas').getContext('2d');
  ctx.drawImage(this, 0, 0);

  // demo only
  var end = performance.now();
  console.log("Complete.", end);
  console.log(`it took ${end - start}ms`)

  // do your stuff
  document.body.appendChild(BIGimage);
}

On my Firefox it takes about 1 second to process the image, while on my Chrome, it seems the image is already processed when the onload event fires.

这篇关于如何知道浏览器何时完成加载后处理图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！