有没有一种原生的Javascript方法,在继续执行之前等待图像完全渲染?我需要在文档已经加载完成后才进行这个操作。根据Is there something like a ready event when an image in html is loaded and rendered?,文档的load事件会等待渲染完成。但是,我需要在文档初始加载完成后再加载图像。
人们似乎说要在图像元素上使用load事件。然而,元素的load事件只能检测到图像何时被加载,而无法检测到图像何时完成渲染。
例如,我有一个图像标签设置为视口大小:
以下代码将一个非常大的图像加载到标签中(我正在测试的图像具体大小为7360x4912,但该过程应适用于所有图像大小):
然而,当事件被触发时,图像并没有完全呈现出来(即,要么完全显示为白色,要么部分显示为白色)。
在这里避免使用任意长的setTimeout至关重要,特别是因为在PC和移动浏览器之间渲染时间可能会有很大差异。
最后,我知道可以针对不同的屏幕尺寸提供不同大小的图像,而不是为所有屏幕使用一个大图像。但是,为了达到这个目的,我必须能够检测图像何时完成呈现,因此实际图像大小是无关紧要的。
编辑1: 我在load回调中添加了requestAnimationFrame,并将警报放入requestAnimationFrame的回调中:
人们似乎说要在图像元素上使用load事件。然而,元素的load事件只能检测到图像何时被加载,而无法检测到图像何时完成渲染。
例如,我有一个图像标签设置为视口大小:
<img id="test" style="width: 100vw; height: 100vh;"></img>
以下代码将一个非常大的图像加载到标签中(我正在测试的图像具体大小为7360x4912,但该过程应适用于所有图像大小):
var img = document.getElementById("test");
img.addEventListener("load", function () {
alert("Image is loaded but not necessarily rendered");
});
img.src = "ExtremelyLargeImage.jpg";
然而,当事件被触发时,图像并没有完全呈现出来(即,要么完全显示为白色,要么部分显示为白色)。
在这里避免使用任意长的setTimeout至关重要,特别是因为在PC和移动浏览器之间渲染时间可能会有很大差异。
最后,我知道可以针对不同的屏幕尺寸提供不同大小的图像,而不是为所有屏幕使用一个大图像。但是,为了达到这个目的,我必须能够检测图像何时完成呈现,因此实际图像大小是无关紧要的。
编辑1: 我在load回调中添加了requestAnimationFrame,并将警报放入requestAnimationFrame的回调中:
var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
img.src = "ExtremelyLargeImage.jpg";
正如预期的那样,这不起作用,因为requestAnimationFrame在下一次重绘之前执行其回调。
编辑2:
在堆栈中添加第二个requestAnimationFrame层具有与仅有一个相同的问题。基本上,现在它在第一次和第二次重绘之间执行警报,而不仅仅是在第一次之前。但是,不能保证图像已经完全绘制完成。尽管如此,这是一种改进。
var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
});
img.src = "ExtremelyLargeImage.jpg";
load
事件监听器中添加一个requestAnimationFrame()
回调函数。 - undefined