javascript 加载图像后，如何知道浏览器何时完成对图像的处理？

uinbv5nw 于 2023-01-11 发布在 Java

关注(0)|答案(2)|浏览(139)

创建图像对象时，可以使用"complete"属性或"onload"方法了解何时完全加载，然后，此图像已使用一些时间进行处理（例如调整大小），在大文件中可能是几秒钟。
如何知道浏览器何时完成处理图像加载后？
编辑：在例子中可以看到一个滞后之间的"完整"的消息和图像的外观，我想避免这种情况。
使用"onload"方法的示例：

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

使用"complete"属性的示例：

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

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

JavaScript

来源：https://stackoverflow.com/questions/39543290/how-to-know-when-browser-finish-to-process-an-image-after-loading-it

2条答案

按热度按时间

jqjz2hbq1#

HTMLImageElement接口有一个decode()方法，它允许我们等待直到图像准备好绘制，就像你想要的那样。

var BIGimage;
putBIGimage();

function putBIGimage() {
  BIGimage = document.createElement("IMG");
  BIGimage.height = 200;
  BIGimage.src = "https://upload.wikimedia.org/wikipedia/commons/c/cf/Black_hole_-_Messier_87.jpg?r=" + Math.random();
  BIGimage.onload = e => console.log('load event', performance.now());
  BIGimage.decode().then(waitBIGimage);
  BIGimage.onerror = console.error;
}

function waitBIGimage() {
  // uses the synchronous testing method to check it works fine
  var start = performance.now();
  // only to see if it worked fine
  var ctx = document.createElement('canvas').getContext('2d');
  ctx.drawImage(BIGimage, 0, 0);
  ctx.drawImage(ctx.canvas, 0, 0);

  var end = performance.now();
  console.log(`it took ${end - start}ms to draw`)

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

另一种方法是利用CanvasContext2D drawImage方法可以同步的事实。有些浏览器可能会尝试延迟下一个绘画帧的实际绘画，但通过将画布绘制到其自身上，我们可以强制大多数当前的UA同步呈现图像。
因此，您可以在waitBIGimage方法中将其用作等待方法。

var BIGimage;
putBIGimage();

function putBIGimage() {
  BIGimage = document.createElement("IMG");
  BIGimage.height = 200;
  BIGimage.src = "https://upload.wikimedia.org/wikipedia/commons/c/cf/Black_hole_-_Messier_87.jpg?r=" + Math.random();
  BIGimage.onload = waitBIGimage;
  BIGimage.onerror = console.error;
}

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(BIGimage, 0, 0);
  // on some system the drawing of the image may be delayed to the next painting frame
  // we can try force the synchronous rendering by drawing the canvas over itself
  ctx.drawImage(ctx.canvas, 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);
}

在我的Firefox上，处理图像大约需要1秒钟，而在我的Chrome上，速度要快一些。
但是方法的一个大问题是它是同步的，因此在处理Image的整个过程中都会阻塞脚本。
还有一种方法是使用createImageBitmap()方法，该方法应该在GPU中分配图像位图，准备进行绘制。

赞(0）回复(0）举报 2023-01-11

u0sqgete2#

没有可靠的方法可以知道-您的浏览器可以继续执行任意javascript或执行内置函数（例如，调整浏览器窗口大小），这可能直接或间接影响图像，并导致图像被重绘，或看起来暂时无法完成绘制。
您可以在图像的生命周期中挂钩到特定的事件，但是，严格地说，“完成”只在浏览器窗口关闭时发生。

赞(0）回复(0）举报 2023-01-11