do7be.exports

寿司の話かエンジニアリングの話

画像がキャッシュされてjQuery.on('load')が効かない場合

画像のロードが既に終わっていて、再度同じ画像を含む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にはハンドラが貼れないらしいのでめんどい。