【JavaScript】load（ブラウザイベント） - ロードが完了した時のイベント

JavaScriptのload（ブラウザイベント）を解説します。

load

loadはロードが完了した時のイベントです。
WEBページや画像、動画などのロード時のイベントに使われます。

サンプル

HTML属性

onload属性を設定します。

Sample

<img id="image" onload="progress();">
<p id="message"></p>
<button id="button" onclick="setImageURL();">ボタン</button>

<script type="text/javascript">
    
    function setImageURL() {
        let image = document.getElementById('image');
        image.src="https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg";
    }
    
    function progress() {
        let message = document.getElementById('message');
        message.textContent = 'Image loaded.';
    }
    
</script>

プレビュー

DOMメソッド

イベント種別にloadを設定します。

Sample

<img id="image" onload="progress();">
<p id="message"></p>
<button id="button" onclick="setImageURL();">ボタン</button>

<script type="text/javascript">
    
    function setImageURL() {
        let image = document.getElementById('image');
        image.src="https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg";
    }
    
    function progress() {
        let message = document.getElementById('message');
        message.textContent = 'Image loaded.';
    }
    
    let button = document.getElementById('button');
    button.addEventListener('input', setImageURL);
    
    let image = document.getElementById('image');
    image.addEventListener('input', progress);
    
</script>

プレビュー