Javascript 加载innerHTML中的外部元素后的回调

我有一个javascript字符串，我想用它来实例化特定元素的子元素，例如：

let target = document.getElementById("target")
let string = ```
    <div>
        <img src="somewhere">

        <h1> This is a heading </h1>

        <p> And some text <p>
    </div>
```
target.innerHTML = string

但有时它是不正确的，因为有时图像（或任何其他外部元素）已经加载，有时在我找到偏移量之前没有加载。有人能推荐一种无jquery的方法来确定

target

的内容何时加载完所有外部资源吗？

“
"<img src='somewhere' onload='imageIsLoaded(this.id)'>"  

---

imageIsLoaded（）可以是一个javascript函数。

您最好的选择可能是为每个可加载项添加一个

load

侦听器 在您的目标中，然后在它们全部加载后发出回调

let-onReady=（目标，回调）=>{
//将需要加载的任何其他标记添加到选择器中
//即查询选择器all（'img，iframe'）等。
让loadables=[…target.querySelectorAll（'img'）]；
总重量=可装载量。长度；
让doneCount=0；
//因为我使用的是bind，所以它需要是一个普通函数，而不是arrow函数
设loadObserver=function（）{
//删除侦听器，因为我们不再需要它
此.removeEventListener（'load'，loadObserver）；
doneCount+=1；
如果（doneCount==总计）{
回调（）；
}
};
loadables.forEach（el=>{
el.addEventListener（'load'，loadObserver.bind（el），true）；
});
};
让target=document.getElementById（“target”）；
让字符串=`
img{
边框：1px实心#000；
背景：#ccc；
}
#目标{
边框：1px虚线#f00；
}
向映像添加一个onload侦听器，并在处理程序函数中执行所需操作。请尝试：
image.onload=function（）{/*…*/}
。这将在图像完全加载时触发，您可以读取有关可能需要加载的其他元素的偏移量。图像只是一个典型的例子。好吧，你问的是关于
img
，对吗？不是所有元素都有一个onload事件，这些元素有
，，，
，订阅所有这些类型的子元素的所有onload事件就足够了吗？Jquery free请：P不能将Jquery添加到此项目中。但是，是的，这种功能。哦，我的糟糕。如果你想免费使用jquery，那么你可以添加
onload
event listener..查看更新后的答案。是的，这就是我最后要做的。谢谢你的帮助：）
"<img src='somewhere' onload='imageIsLoaded(this.id)'>"