Ошибка загрузки полифилла excanvas через Modernizr.load

Я пытаюсь загрузить полифилл excanvas в файл js для конкретной страницы для моей страницы. Этот файл сценария вставляется после тега body на моей странице.

Странно то, что если я использую

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

в моем теге head все работает отлично, но я не обязательно хочу загружать этот скрипт для браузеров, совместимых с 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 не работает вне тега head?


modernizr excanvas
person shinyhat    schedule 14.12.2011    source источник
comment
Этот пример, по-видимому, страдает от той же проблемы в IE 8: msdn.microsoft.com /en-us/magazine/hh394148.aspx   -  person shinyhat    schedule 15.12.2011
comment
У меня такая же проблема. IE8 не жалуется на настройку, но никогда не загружает excanvas.js   -  person jaketrent    schedule 07.02.2012

Ответы (2)


arrow_upward
2
arrow_downward

в данном требовании вы можете использовать условные операторы IE, подобные этому...

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

хватило бы....

оператор будет понятен только версии IE ниже 9, и тег скрипта будет прикреплен.

person Vijay Shivakumar    schedule 17.08.2012

arrow_upward
0
arrow_downward

Единственное, что вы пропустили, это инструкции по использованию excanvas:

Файл excanvas.js должен быть включен на страницу до любых вхождений элементов холста в разметку. Это связано с ограничениями в IE, и нам нужно творить чудеса, прежде чем IE увидит любой экземпляр в разметке. Рекомендуется поставить его в голову.

person Prestaul    schedule 07.07.2013