asp.net accordianに埋め込まれたFlashのパフォーマンスが低い

StackOverflow https://stackoverflow.com/questions/637179

  •  10-07-2019
  •  | 
  •  

質問

私はajaxツールキットのアコーディオンエクステンダーを使用しています。コンテンツセクションにFlashを埋め込みます。

現在、私が作業しているものは http://kristinsconfections.com/gallery.aspx。 ご覧のとおり、アコーディオンを切り替えると少し途切れます。私はflickrからフラッシュスライドショーを引き出しているので、それをまったく制御できません。このサイトは、パン屋になろうとしている友人専用ですので、非常にイライラするだけの優先度ではありません!! javascript、.net、またはjqueryを使用してできることは何ですか？

このページで使用している正確なコードは次のとおりです。

<cc1:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
        HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"
        FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None">
        <Panes>
            <cc1:AccordionPane ID="pnlCakes" runat="server">
                <Header><div ><span style="float:left;">Cakes</span></div></Header>
                <Content>
                    <object width="572" height="429" type="application/x-shockwave-flash"
                     data="http://www.flickr.com/apps/slideshow/show.swf?v=67089"> 
                    <param name="flashvars" value="&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640424865%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640424865%2F&set_id=72157612640424865&jump_to=" />
                    <param name="allowFullScreen" value="true" />
                    <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=67089" />
                    </object>
                </Content>
            </cc1:AccordionPane>
             <cc1:AccordionPane ID="pnlCookies" runat="server">
                <Header><div ><span style="float:left;">Cookies</span></div></Header>
                <Content>
                 <object width="572" height="429"  type="application/x-shockwave-flash"
                 data="http://www.flickr.com/apps/slideshow/show.swf?v=67089"> 
                <param name="flashvars" value="&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640405779%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640405779%2F&set_id=72157612640405779&jump_to=" />
                <param name="allowFullScreen" value="true" />
                <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=67089" />
                </object>
                </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="pnlCupcakes" runat="server">
                <Header><div ><span style="float:left;">Cupcakes</span></div></Header>
                <Content>
                <object width="572" height="429"  type="application/x-shockwave-flash"
                 data="http://www.flickr.com/apps/slideshow/show.swf?v=67089"> 
                <param name="flashvars" value="&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612589253131%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612589253131%2F&set_id=72157612589253131&jump_to=" />
                <param name="allowFullScreen" value="true" />
                <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=67089" />
                </object>
                </Content>
            </cc1:AccordionPane>
        </Panes>
</cc1:Accordion>
役に立ちましたか？

解決

一般的に、Ajaxツールキットはあまりにも不格好です。 JQueryは非常に使いやすく、優れたクロスブラウザーサポートと拡張性を備えているため、優先的に使用します。同じことをお勧めします。法案に合うJQuery UIスイートには、アコーディオンウィジェットがあります。

すべてのFlashムービーを非表示のdivにロードするとパフォーマンスが低下する場合は、Flashでロードできる変更時にフックできるイベントがあります。これは、アコーディオンページに記載されています（JQueryで簡単に実行できます）。

他のヒント

Firefoxに特有ではないバグ特定のウィジェット。私の最善の試み：

<script type="text/javascript">
    function pageLoad() {
        var acc = $find('<%= MyAccordion.ClientID %>_AccordionExtender');
        acc.add_selectedIndexChanged(MyAccordion_SelectedIndexChanged);
    }
    function MyAccordion_SelectedIndexChanged(sender) {
        $("object").css("visibility", "hidden");
        setTimeout(
            function() { 
                $("object").eq(sender.get_SelectedIndex()).css("visibility", "visible"); 
            }, 1000);
    }
</script>
  1. アコーディオンアニメーションが再生されるようにオブジェクトの可視性を非表示にします
  2. 1秒待機-アニメーションが終了するのに十分な長さであることを期待しますが、ラグが目立つほど長くはありません
  3. 非表示のオブジェクトを表示

これはちらつきを修正しますが、アニメーションの再生中にフラッシュオブジェクトは消えます

FireFox3、IE8、Chromeでテストしましたが、実際にはIE（バージョン8）でうまく機能しているようで、FF3とChromeではあまり良くありません。

この投稿を見つけましたa>同じ問題に出くわしたどこかで、FadeTransitionsプロパティを 'False'に設定すると修正されるようですが、それはあなたが望んでいたソリューションではないに違いありません。

とりあえずアコーディオンにプレビュー画像を入れてみましたか？次に、ユーザーがJavaScriptを使用して画像をクリックしてフラッシュに置き換えますか？それはもっと良く見えると思います。

誰かがアコーディオンで別のペインを選択すると（監視するイベントがわからない-AccordionBehavior.jsを確認）、フラッシュを削除して画像に置き換えて続行できます。

この場合、問題を引き起こしているフラッシュとブラウザの相互作用について心配する必要はないと思います。

jQueryアコーディオンウィジェットも使用することをお勧めします。私はそれを使って作業しましたが、非常に使いやすく、軽量で、すべてのブラウザーで動作し、バグはまったく見つかりませんでした。選べるスキンはたくさんありますが、プッシュが必要になったとしても、実際に自分のスキンを作成するのはそれほど苦痛ではありません。

それ以外に、SWFの埋め込み方法、特に wmode 属性を見てください。 こちらと書かれた説明記事があります。あなたはそれから始めることができます。 Flash Player 10用にコンパイルされたSWFを使用していないと思われるため、 GPU および direct モードは無視できます。

そしてもちろん、表示されていないフラッシュムービーをアンロードする必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top