Javascriptで画像のロードではなく描画の完了を把握する方法

使い方

<style>
    .fade_off {
        opacity: 0;
    }

    .fade_on {
        opacity: 1;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        -ms-transition: all 1s;
        transition: all 1s;
    }
</style>

<div>
    <p id="imagemessage">ただいま画像を読み込み中……</p>
    <img src="無題.bmp" class="fade_off" id="target-image" ontransitionend="ImageGuide();">
</div>

<script>
    setTimeout(() => {
        $("#target-image").removeClass("fade_off").addClass("fade_on");    
    }, 100);
    

    function ImageGuide() {
        document.getElementById('imagemessage').innerText = '読込完了しました！';
        setTimeout(() => {
            alert('読込完了しました！');
        }, 100);
    }
</script>

参考