画像のロードが既に終わっていて、再度同じ画像を含むDOMをappendしてloadイベントやerrorイベントハンドラを貼りたい場合、ブラウザでキャッシュされた画像が返されるとloadイベントが発火されない。
// 何度も下記処理が走る場合 const url = httpRequestHoge() // 何度も同じ画像が返ってくる可能性あり imgTag = $(`<img src="#{url}">`) $('body').append(imgTag) imgTag .on('load', function () { $(this).css('height', 0) })
だとloadイベントが発火されない場合がある。
const url = httpRequestHoge() imgTag = $('<img>') // ここではsrcに入れない $('body').append(imgTag) imgTag .on('load', function () { $(this).css('height', 0) }) .attr('src', url) // イベントハンドラを貼ってからsrc指定
loadはdocumentに存在しないDOMにはハンドラが貼れないらしいのでめんどい。