javascript imgタグの画像変更のイベント

javascriptにて、imgタグの画像を変更した時、画像の読み込みがちゃんと完了してから処理を行いたいです。

画像が読み込み終わって、画像がちゃんと切り替わると発火するイベントハンドラは何かありますでしょうか？

よろしくお願いいたします。

document.getElementById("id_img_a").src = "../image/1.JPG";
この処理で<img id="id_img_a" src="../image/2.JPG">の画像に対し、変更を命令してから、
表示される画像が1.JPGに変わった時に、処理を実施したいです。

m.ts10806

2020/05/04 06:15

「javascript　画像を読み込んでから」などで調べると出てくる情報では何が足りませんでしょうか。

ellion

2020/05/04 06:21 編集

返信ありがとうございます。もしかして、imgのonloadは画像の読み込み完了だけでなく、画像も変更においても読み込み完了時に発火するという事でしょうか？

ellion

2020/05/04 06:30

document.getElementById("id_img_a").onload = function() { alert('読み込み完了'); } だと、最初の2.JPGの読み込み完了の時も、画像を1.JPGに切り替え終わった時も発火しないので、つまってます。

think49

2020/05/04 06:47

markdownを使ってください。追加情報は質問文に追記してください。

ellion

2020/05/04 06:49

返信ありがとうございます。ちょうど自己解決いたしました。

think49

2020/05/04 06:49

https://teratail.com/help#about-markdown

m.ts10806

2020/05/04 06:59

マークダウンできない方は下記の質問を参考に。 https://teratail.com/questions/238564 質問も回答も何度でも編集できます。

think49

2020/05/04 07:03

https://teratail.com/help/question-tips#questionTips3-5

ellion

2020/05/04 07:05

返信ありがとうございます。見させていただきます。

行動規範の内容に同意します

回答2件

document.getElementById("id_img_a").onload = function() { alert('読み込み完了'); }
だと、最初の2.JPGの読み込み完了の時も、画像を1.JPGに切り替え終わった時も発火しないので、つまってます。

こちらの環境では発火します。

HTML
1<!DOCTYPE html>
2<title>sample</title>
3<img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u15/153487/hIXJnrKM_thumbnail.jpg" alt="icon">
4<script>
5'use strict';
6const img = document.querySelector('img');
7img.onload = event => console.log(event.type, event.target.src);
8img.src = 'https://teratail-v2.storage.googleapis.com/uploads/avatars/29548/qWEFkt9x_thumbnail.jpg';
9</script>

上記HTMLを実行したら、どうなりますか。

Re: ellion さん

投稿2020/05/04 06:47

think49

総合スコア18196

自己解決

javascript
1var v_main_img;
2window.addEventListener("load", 
3    function(){ 
4        v_main_img = document.getElementById("id_img_a"); 
5        v_main_img.addEventListener('load', function() {alert('読み込みました。');
6    }, false); }, false);