imgタグの読込を強制的に中止するには？

Question

<script>
window.onload=function(){
function img_load(){
for(i=0;i<200;i++){
img=document.createElement("img");
img.src=i+".jpg";//連番で0から200までが存在すると仮定する
img.style.width="300px";
img.style.height="200px";
document.body.appendChild(img);
}
}
img_load();
}
</script>

<input type="button" value="読込処理の中断">

上記スクリプトを走らせると0～200までのimgタグを連番で生成します
サイズは壁紙だと仮定して、読込中の画像は処理を中断させるようなことをしたいんですがどうしたらいいでしょうか
読込処理の中断ボタンを押したら現在画像ロード中の処理を中断させたいです

Comments

[退会済みユーザー]

「中断ボタン」で中止フラッグを立てて、ループの中でそれをチェックして、フラッグが立っていたら中止するようにコーディングするというのではいかが？

[退会済みユーザー]

ループは一瞬で終わるので関係ないと思います
画像の読込というのは（徐々に画像が表示されていく状態）です
これを中止したいです

[退会済みユーザー]

そうでした、非同期になりますね。失礼しました。

Answer 1

ボタンが押されたら、
対象のimgすべてに対して、
complete プロパティが偽の場合は、
src 属性を消す

という処理をします。

Comments

[退会済みユーザー]

ありがとうございます
感謝します

<script>
window.onload=function(){

function img_load(){
for(i=0;i<200;i++){
img=document.createElement("img");
img.src=i+".jpg";//連番で0から200までが存在すると仮定する
img.style.width="300px";
img.style.height="200px";
img.style.background="red";
document.body.appendChild(img);
}
}
img_load();

}
</script>

<input type="button" value="読込中断" onclick="Array.from(document.querySelectorAll('img'), images => {c=images.complete;if(!c){images.src='';}})">

[int32_t]

document.querySelectorAll('img') を20回もやる必要はないかと。for (let img of document.querySelectorAll('img')) { if (!img.complete) ...

↑ 古いコードに対してのコメントでした。失礼しました。