畫布回退到Flash正在加載圖像

Question

在我的網站上，我展示了帶有Flash的廣告

我仍然使用Flash，因為我的訪客使用的舊瀏覽器不支持html5

如果用戶不支持Flash，則展示一個畫布廣告

如果用戶不支持Flash或不支持畫布，則向他們顯示圖像

這是我的代碼：

<p>
<object width="728" height="90" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="alter-content" align="middle">
    <param value="http://www.bellezaculichi.com/banners/47.swf" name="movie">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <param name="play" value="true">
    <param name="loop" value="true">
    <param name="wmode" value="window">
    <param name="scale" value="showall">
    <param name="menu" value="false">
    <param name="devicefont" value="false">
    <param name="salign" value="">
    <param name="allowScriptAccess" value="always">
    <!--[if !IE]>-->
    <object data="http://www.bellezaculichi.com/banners/47.swf" width="728" height="90" type="application/x-shockwave-flash">
        <param name="movie" value="http://www.bellezaculichi.com/banners/47.swf">
        <param name="quality" value="high">
        <param name="bgcolor" value="#ffffff">
        <param name="play" value="true">
        <param name="loop" value="true">
        <param name="wmode" value="window">
        <param name="scale" value="showall">
        <param name="menu" value="false">
        <param name="devicefont" value="false">
        <param name="salign" value="">
        <param name="allowScriptAccess" value="always">
        <!--<![endif]-->

        <!-- inicia sin flash -->
        <script>
            window.onload = function() {
                canvasApp();
            }

            function canvasApp() {

                var mi_canvas = document.getElementById("canvas");

                if (!mi_canvas || !mi_canvas.getContext) {
                    return;
                }


                var context = mi_canvas.getContext("2d");

                var pic = new Image();

                pic.src = "./banners/" + 47 + ".jpg";

                pic.addEventListener('load', imagen_cargada, false);

                function imagen_cargada() {
                    dibuja_canvas();
                }


                function dibuja_canvas() {
                    context.drawImage(pic, 0, 0, 728, 90);
                }

                function onMouseClick(e)

                {

                    window.open("http://www.si-net.com.mx/registro.php", '_blank');
                }

                mi_canvas.addEventListener("click", onMouseClick, false);

                dibuja_canvas();

            }
        </script>

        <canvas id="canvas" width="728" height="90" style="cursor:pointer;">
            <!-- si no soporta canvas -->
            <a href="http://www.si-net.com.mx/registro.php" target="_blank" rel="nofollow">
                <img src="./banners/47.jpg" width="728" height="90" border="0">
            </a>
            <!-- si no soporta canvas -->
        </canvas>

        <!-- fin sin flash -->

        <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>
</p>

有用...

我使用Google Chrome開發者工具進行測試，發現使用Flash的人會加載畫布后備廣告中使用的圖像

如果用戶使用閃光燈，則不必加載畫布中使用的圖像。

如果用戶使用閃光燈，如何避免加載畫布中使用的圖像？

先感謝您

Answer 1

我實現了我想要的。 如果用戶已安裝Flash，則避免加載畫布資源。

這是我的代碼：

<object width="900" height="506" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="alter-content" align="middle">
<param value="catarina.swf" name="movie" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="false" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object data="catarina.swf" width="900" height="506" type="application/x-shockwave-flash">
    <param name="movie" value="catarina.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="play" value="true" />
    <param name="loop" value="true" />
    <param name="wmode" value="window" />
    <param name="scale" value="showall" />
    <param name="menu" value="false" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="sameDomain" />
    <!--<![endif]-->
    <!-- inicia sin flash -->
    <div id="swiffycontainer" style="width: 550px; height: 400px">
    </div>
    <script>
        var hasFlash = false;
        try {
            var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
            if (fo) {
                hasFlash = true;
            }
        } catch (e) {
            if (navigator.mimeTypes && navigator.mimeTypes['application/x-shockwave-flash'] != undefined && navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
                hasFlash = true;
            }
        }
        if (hasFlash == false) {


            function load_animacion() {

                var animacion = document.createElement("script");

                animacion.type = "text/javascript";

                animacion.src = "catarina-v02.js";

                document.head.appendChild(animacion);
            }

            function loadSwiffy() {


                var animacion_canvas = document.createElement("script");

                animacion_canvas.type = "text/javascript";

                animacion_canvas.src = "https://www.gstatic.com/swiffy/v7.2.0/runtime.js";

                if (animacion_canvas.readyState) {
                    animacion_canvas.onreadystatechange = function() {
                        if (animacion_canvas.readyState == "loaded" || animacion_canvas.readyState == "complete") {
                            animacion_canvas.onreadystatechange = null;

                            load_animacion();
                        }
                    };
                } else {
                    animacion_canvas.onload = function() {
                        load_animacion();
                    };
                }



                document.head.appendChild(animacion_canvas);

            }



            window.onload = loadSwiffy;
            // carga la libreria de swiffy


        }
    </script>

    <!-- fin sin flash -->

    <!--[if !IE]>-->
</object>
<!--<![endif]-->

如果用戶沒有閃光燈支持，它將動態加載創建CANVAS動畫所需的javascript代碼。

在此示例中，firts加載SWIFFY庫（ https://www.gstatic.com/swiffy/v7.2.0/runtime.js ）

加載庫后，然后加載此js代碼（catarina-v02.js）以創建畫布並為其設置動畫

這樣，如果用戶安裝了Flash，就可以避免加載畫布資源。