JS codepanのコードはどこでも動作しません

Question

このコードは、IE 10または11のcodepanで開くと動作しますが、jsfiddleやIE 10または11のどこでも同じ動作を実行しようとすると動作しません私はすでにコピー/ペーストとアーカイブとしてのエクスポートを試みました。何が問題なのですか？

codepan

jsfiddle

if ('objectFit' in document.documentElement.style === false) { 
 
\t document.addEventListener('DOMContentLoaded', function() { 
 
\t \t Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), function (image) { 
 
\t \t \t (image.runtimeStyle || image.style).background = 'url("' + image.src + '") no-repeat 50%/' + (image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')); 
 

 
\t \t \t image.src = 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'' + image.width + '\' height=\'' + image.height + '\'%3E%3C/svg%3E'; 
 
\t \t }); 
 
\t }); 
 
}

img { 
 
\t box-shadow: 0 0 0 1px; 
 
\t height: 200px; 
 
\t width: 200px; 
 
} 
 

 
img[data-object-fit="contain"] { 
 
\t object-fit: contain; 
 
} 
 

 
img[data-object-fit="cover"] { 
 
\t object-fit: cover; 
 
}

<img src="https://placehold.it/1080x200" data-object-fit="cover"> 
 

 
<img src="https://placehold.it/1080x200" data-object-fit="contain">

Answer 1

アントンChukanov、あなたの考えは正しかった、少し私はjsfiddleに、私は負荷JSの種類を選択することができますので、デフォルトのタイプは、「オンロード」とするとき、私はあることを発見しました「ラップインボディなし」または「ラップインヘッドなし」を選択すると、正常に動作します。だから私は、コードよりもロードタイプを変更する方が簡単だと思います。 この質問でenvolvedされた皆さん、ありがとう！

Answer 2

Codepanは自分のコードを実行する上で 'DOMContentLoaded' イベントを発生させますが、jsFiddleはしていません。チェックdocument.readyState

https://codepen.io/anon/pen/Rpjedb

https://jsfiddle.net/9ua5h7qc/1/