backgroundImageでonerrorイベントを発生させるには？

Question

backgroundImageで画像ファイルが存在しなかった場合にimgタグ同様onerrorを発生させるにはどうしたらいいでしょうか？

<script>
window.onload=function(){
div=document.createElement("div");
div.style.width="100px";
div.style.height="100px";
div.style.backgroundImage="url(https://teratail.com/error.jpg)";
div.style.backgroundRepeat="no-repeat";
div.style.backgroundSize="contain";
div.style.backgroundPosition="center";
div.addEventListener('error', function() {
console.log("error");
});
document.body.appendChild(div);
}
</script>

```ここに言語を入力
<script>
window.onload=function(){
img=document.createElement("img");
img.src="https://teratail.com/error.jpg";
img.style.width="100px";
img.style.height="100px";
img.addEventListener('error', function() {
console.log("error");
});
document.body.appendChild(img);
}
</script>

Answer 1

img.srcで先読みすればよいだけでは？

Comments

[退会済みユーザー]

そうすると無駄に負荷が発生しませんか？

[yambejp]

キャッシュされるので負荷は最小限だと思います

[退会済みユーザー]

こういうことでいいでしょうか

<script>
window.onload=function(){
img=document.createElement("img");
img.id="image";
img.src="https://teratail.com/error.jpg";
img.style.width="100px";
img.style.height="100px";
img.addEventListener('error', function() {
document.body.removeChild(document.getElementById(this.id));
});
img.addEventListener('load', function() {
document.body.removeChild(document.getElementById("image"));
div=document.createElement("div");
div.style.width="100px";
div.style.height="100px";
div.style.backgroundImage="url(https://teratail.com/error.jpg)";
div.style.backgroundRepeat="no-repeat";
div.style.backgroundSize="contain";
div.style.backgroundPosition="center";
document.body.appendChild(div);
});
document.body.appendChild(img);
}
</script>

[yambejp]

こんな感じでしょうか？
window.addEventListener('DOMContentLoaded', ()=>{
const url="https://teratail.com/error.jpg";
const img=document.createElement("img");
img.src=url;
const div=document.createElement("div");
div.style.width="100%";
div.style.height="100%";
document.body.appendChild(div);
img.addEventListener('load', ()=>{
div.style.backgroundImage=`url(${url})`;
});
});