在普通Javascript中有没有一种方法可以等到图像完全渲染后再继续执行？我需要在文档加载后进行此操作。根据当加载和渲染html中的图像时，是否存在类似于就绪事件的情况？，文档的加载事件等待渲染完成。但是，我需要在最初加载文档后加载图像。
人们似乎说要在图像元素上使用加载事件。但是，元素的加载事件仅检测图像何时加载，而不检测图像何时完成渲染。
例如，我有一个设置为视口大小的图像标签：
<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:我在加载回调中添加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";
requestAnimationFrame()的问题可能是在事件load之后，img将在第二个动画帧上渲染。所以你走的是正确的道路，只需首先调用上的另一个函数requestAnimationFrame
所以你可以试试这样的东西：
<script>
function rendered() {
//Render complete
alert("image rendered");
}
function startRender() {
//Rendering start
requestAnimationFrame(rendered);
}
function loaded() {
requestAnimationFrame(startRender);
}
<img onload="loaded();" src="http://ximmix.mixeriksson.com/bilder/iron_maiden_piece_of_mind_foldout_cleaned_3034x1500px_110412145556_2.jpg">
如果它起作用，也要归功于#Hovitya这个帖子
这是他的jsfiddle示例
使用加载事件。
$("img#test").on("load", function(event){
//enter your code here
})