タイトルが何を言っているのか分からない感じですが、要はページのロード時にAJAXで取ってきたリストに差し替えるみたいなことをやると、IE10、IE11ではそのリストに表示されるべきアイコン等がなぜか表示されないということが起こります。
具体的には下記のことを行うと、指定したSVGが表示されなくなります。
-
background-imageにSVGが指定された要素をHTMLに入れておく -
DOMContentLoadedのタイミングでそれを削除する - 指定されているSVGの読み込みが終わった後に同じような要素を追加する
再現コード
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>テスト</title>
<style>
# svg {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg);
width: 262px;
height: 372px;
border: solid 1px #000;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(function(){
$('body').html('');
setTimeout(function(){ $('<div id="svg"></div>').appendTo('body'); }, 1000)
})
</script>
</head>
<body>
<div id="svg"></div>
</body>
</html>
| 期待した結果 | 実際の結果 |
|---|---|
 |
 |
原因の推測
IEはCSSが参照している画像のうち、HTMLから使われているものだけをロードするという挙動になっているようで、それらの画像のロードはDOMContentLoadedから始まります。したがってDOMContentLoadedのタイミングで要素を削除すると、ほぼ確実に「SVGのロードは始まったがまだ終わってはいない」という状態で要素を削除することができます。
そしてそのSVGのロードが終わった時に本来それが表示されるべき要素が存在していない場合に、何か中途半端な状態になって表示されなくなってしまうようです。PNG画像などでは発生しないので、SVGのパースか何かなのでしょうか。F12開発者ツールで表示されなくなったSVGを指定したimg要素を挿入すると、なぜかbackground-imageの方のSVGも表示されるようになるのが興味深いところです。
回避方法
どうやら要素を消すのに.html('')しているのがまずいようです。jQueryのremove()メソッドやempty()メソッドで削除するとこの現象は発生しなくなります。innerHTMLでガッと置き換えるという乱暴なことはしてはいけないということなのでしょう。
$('body').html(''); // NG
$('#svg').remove(); // OK
$('body').empty(); // OK
ということで、横着しないでちゃんとDOM操作で処理しましょうという話でした。