Встроенный Silverlight в сочетании с Javascript, выполняющимся на IE8 - PullRequest
Новая
       14

Встроенный Silverlight в сочетании с Javascript, выполняющимся на IE8

0 голосов
/ 29 марта 2012

У меня есть простой спиннер с изображениями, созданными с помощью javascript и, в частности, jquery animate. Спиннер отлично работает в большинстве браузеров, но немного медленен в IE7 / IE8. Однако, когда мой встроенный материал Silverlight воспроизводится (потоковое видео), производительность спиннера (в то же время на той же странице) действительно падает. В IE7 он становится очень медленным - но работает, в IE8 он становится настолько медленным, что вообще не анимируется - просто зависает на несколько секунд, а затем мгновенно переворачивается.

Вопрос: есть ли что-то конкретное в IE8 при одновременном использовании Silverlight и javascript?

Некоторая информация о блесне и серебряном свете:

Spinner:

Все изображения размещаются в массиве, где каждая позиция соответствует набору свойств CSS. Массив переделывается при каждом клике и рисуется снова. 

// one of the positions - css property
POS_N : {
    left : '50%',
    top : '50%',
    right : 'auto',
    display : 'block',
    width : 200,
    height : 288,
    marginLeft : -Math.floor(200 / 2),
    marginTop : -Math.floor(288 / 2),
    zIndex : 5005
},

Спиннинг код: 

/**
 * Spin - Spins the carousel
 */
spin : function(index) {
    var self = this;

    // shift the array
    var steps = parseInt(index) - self.CURRENT_POS;

    for ( var i = 0; i < Math.abs(steps); i++) {
        // left or right?
        if (steps < 0) {
            self.ITEMS.unshift(self.ITEMS.pop());
        } else {
            self.ITEMS.push(self.ITEMS.shift());
        }
    }

    var animationWorklist = [];

    // iterate items
    $.each(this.ITEMS, function(i, data) {
        var className = (i === self.CURRENT_POS) ? 'focused slide slide' + i : 'slide slide' + i;
        var el = self.ITEMS[i].el;

        // deep copy
        var dress = self.dress(i); // get the CSS position object for this array positon

        // remove properties
        delete dress.zIndex;

        // item needs to go around behind the other items - set lower zIndex
        var lastItem = (steps < 0 && i === 0) || (steps > 0 && i === self.ITEMS.length - 1);

        if (lastItem) {
            zIndex = self.POS_NONE.zIndex;
        }

        // update dom
        el.attr('class', className).find('a').attr('rel', i).find('span').html(i);

        var pos = index - self.CURRENT_POS;

        // only animate items within viewing range
        if (pos >= -3 || pos <= 3) {
            if (self.isIE78) {

                // remove properties
                delete dress.right;
                delete dress.display;
                delete dress.marginRight;

                if (pos === 0) {
                    dress.marginRight = 'auto';
                }
            }

            animationWorklist.push({
                css : dress,
                zIndex : zIndex,
                el : el
            });
        } else {
            el.css(dress);
        }
    });

    for ( var i = 0; i < animationWorklist.length; i++) {
        var item = animationWorklist[i];
        item.el.stop(false, true).css('z-index', item.zIndex).animate(item.css);
    }
},

И последнее - вложенный объект Silverlight: 

<div id="playerEmbed">
    <div id="silverlightControlHost">
        <object id="silverlightControl" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="<%= this.videoWidth %>" height="<%= this.videoHeight %>">
            <param name="source" value="<%= path %>" />
            <param name="onError" value="onSilverlightError" />
            <param name="minRuntimeVersion" value="5.0.61118.0" />
            <param name="autoUpgrade" value="true" />
        <param name="enableGPUAcceleration" value="true" />
            <param name="InitParams" value="scriptableName=Player,MediaUri=<%=this.url%>" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style: none" />
            </a>
        </object>
        <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px; border: 0px"></iframe>
    </div>
</div>
...