Modernizr.load経由でexcanvas polyfillを読み込めません。

Question

私のページのページ固有のjsファイルにexcanvas polyfillを読み込もうとしています。このスクリプトファイルは、自分のページのbodyタグの後に挿入されます。

奇数ビットは、私は私の頭のタグに

<script type='text/javascript' src='/Scripts/polyfills/excanvas.compiled.js'></script> 

を使用する場合、すべてが素晴らしい作品ということですが、私は必ずしも私が持っていない場合はHTML5対応のブラウザのために、このスクリプトをロードする必要はありませんに。

当然、私はそれを選択的に読み込むためにModernizrを使用しようとしました。これは完全に実行されますが、機能しないjavascriptコードです：

<!-- language: lang-js --> 
$(function() { 
    Modernizr.load({ 
     test: Modernizr.canvas, 
     nope: '/Scripts/polyfills/excanvas.compiled.js', 
     complete: function() { 
      setImage(); 
     } 
    }); 

}); 

これはうまくいくようです。 excanvasスクリプトが正常に読み込まれるように見えます。 setImage関数はキャンバス要素を動的に作成し、それをページ上のdivに追加します。 これはIE9では問題なく動作しますが、IE8ではレンダリングできません。

<!-- language: lang-js --> 
function setImage() { 

    var canvasHello = document.createElement('canvas'); 
    canvasHello.id = 'canvasHello'; 
    $('#divContent').append(canvasHello); 

    if (!Modernizr.canvas) { 
     G_vmlCanvasManager.initElement(canvasHello); 
    } 

    var canvasContext = canvasHello.getContext('2d'); 
    canvasContext.width = 800; 
    canvasContext.height = 600; 
    canvasContext.fillStyle = "#000000"; 
    canvasContext.fillRect(0, 0, 600, 800); 

    var img = document.createElement('img'); 
    img.src = '/Content/images/hello.png'; 
    img.onload = function() { 
     canvasContext.drawImage(img, 100, 25, 100, 100); 
    } 
} 

私は何かが間違っていたか、またはexcanvasスクリプトがヘッドタグの外で機能していませんでしたか？あなたはこのようなIEの条件文を使用することができます与えられた要件で

Answer 1

...

<!--[if lt IE 9]> 
<script src="script/excanvas.js"></script> 
<![endif]--> 

文が唯一のIEバージョン9未満には理解されるであろう....

を十分であろうし、スクリプトタグが添付されます。

Answer 2

あなたは逃した唯一の事はexcanvasの使用方法についてのthe instructionsです：

excanvas.jsファイルは、マークアップでcanvas要素の任意の出現する前にページ内に含まれている必要があります。これはIEの制限に起因し、IEがマークアップのインスタンスを見る前に魔法を行う必要があります。それを頭の中に入れることをお勧めします。