IE11において背景画像が表示されない

仕事で出会ったバグを解決するまで少し骨が折れたのでまとめ。

何が起きたか

bodyタグのonloadでファイルダウンロードを行っている画面において、一部画像が表示されなくなる。

どんな状況か

• 画面遷移するとbodyタグのonloadが発火し、自動でダウンロードが始まる。という機能の画面
• imageタグで読み込んだ画像は表示される
• background-imageで指定された背景画像が表示されない
• IE7からIE11への移行案件だったが、IE7では起こらず、IE11でのみ起こる
• IE以外のブラウザでも発生しない
• ダウンロードをリクエスト（＝location.hrefの書き換え）する直前にalertなどを表示させると画像も表示される
  • ブレークポイントで止めても画像が表示される
  • location.hrefに代入するURLは直リンなので画面遷移は発生しない

状況から推察される原因

背景画像の読み込み中にURLが書き換えられたため、読み込みが中断した。

ポイント

onload内で処理をしているため、画像等の読み込みが完了した後に実行されるものだと思っていたが、
背景画像については読み込み完了していなくてもonloadが発火する。
この仕様はIEのみでなくchromeやFirefoxでも同様だが、URLが書き換わることで読み込みを中断してしまうのはIEのみだった。

IE7で起こらないのはIE11になってDOMの解析速度が上がったことでonloadが背景画像の読み込みに追いついてしまったのではないかと思う。

解決方法

ダウンロードURLをリクエストしている処理を、setTimeout等で別スレッドにすると最後まで読み込まれる。

所感

上記の原因・対策は実験と推察から得られたものなので確証はない。
でも背景画像が読み込まれなくてもonloadが発火するのは何度も再現できたので確かだと思う。
覚えておいたほうがよさそう。