IT技术 - 如何知道浏览器在加载图像后何时完成处理？ - 吾爱随笔录

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

IT技术 javascript

2021-03-13 09:28:54

创建图像对象时，可以使用“完成”属性或“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);
	}

使用“完整”属性的示例：

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 的回应，我为等待图像处理做了这个解决方案。

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个回答

这是一种方法。

CanvasContext2DdrawImage方法是同步的。在能够使用此方法之前，浏览器必须完全渲染图像。

因此，您可以将其用作方法中的等待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(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);
}

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

但是方法的一个大问题是它是同步的，因此在处理图像的所有时间都会阻塞您的脚本。

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() {
  var start = performance.now();
  // only to see if it worked fine
  var ctx = document.createElement('canvas').getContext('2d');
  ctx.drawImage(BIGimage, 0, 0);

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

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

谢谢，我用我制作的解决方案编辑了我的问题:)

2021-04-26 09:28:54

@ArnauCastellví 很高兴它帮助了你，但你不应该依赖这样的完整状态。首先，你会对你的函数进行很多无用的调用，而 js 从 Event 模型中获得它的力量。此外，如果图像无法加载，则 complete 可能会设置为 true，但您无法通过此属性确定它（尽管您可以检查 naturalWidth 属性）。您想要实现的目的应该是通过监听所有图像 onload 和 onerror 事件，增加计数器变量，并仅在计数器达到要加载的图像总数时触发最终回调。

2021-05-02 09:28:54

嗯，是的，这只是概念测试，我仍在努力。谢谢：）

2021-05-17 09:28:54

没有可靠的方法可以知道 - 您的浏览器可以继续执行任意 javascript 或执行内置功能（即调整浏览器窗口的大小），这些功能可以直接或间接影响图像并导致其重新绘制或看起来没有一会画完。

您可以在图像的生命周期中挂钩特定事件，但严格来说，“完成”仅在浏览器窗口关闭时发生。

其它你可能感兴趣的问题

上一篇Angular 表单验证 ng-disabled 不起作用下一篇附加的新行与前一行（行）的行为不同