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

JavaScriptのload（ブラウザイベント）について解説します。

検証環境

JavaScript -

macOS

14.1

load

loadは“読み込みが完了した時を表すイベント”です。

Webページや画像、動画の読み込み完了時などが該当します。

HTML属性

HTML属性でロードイベントを登録するにはonload属性を使用します。

基本構文

<タグ名 onload="処理">

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

___ih_hl_start
<img id="image" onload="process();">
___ih_hl_end

<pre id="log"></pre>

<button id="button" onclick="setImageURL();">画像読み込み</button>

<script type="text/javascript">

    function process() {
        let log = document.getElementById('log');
        log.textContent = 'Image loaded.';
    }
    
    function setImageURL() {
        let image = document.getElementById('image');
        image.src = "https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg";
    }

</script>

プレビュー

８行目のonload="process();"がHTML属性を利用したロードイベントの登録です。

ボタンをクリックするとsetImageURL関数を呼び出し、img要素に画像URLを設定します。

img要素は画像の読み込み後、process関数を呼び出し、テキストを表示します。

実際にプレビューで動作を確認することが可能です。

DOMメソッド

DOMのaddEventListenerメソッドでロードイベントを登録するにはイベント種別にloadを与えます。

基本構文

要素オブジェクト.addEventListener('load', 処理);

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

<img id="image">

<pre id="log"></pre>

<button id="button">画像読み込み</button>

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

プレビュー

１８〜２１行目がaddEventListenerメソッドを利用したロードイベントの登録です。

プレビューのボタンをクリックするとimg要素に画像URLを設定し、読み込み完了後に、ロードイベントによってテキストが表示されます。