javascript - Canvas fallback to flash is loading images -
in site show ads flash
i still use flash because visitors have older browsers not support html5
if user has no flash support, show canvas ad
if user has no flash support or has no canvas support, show them image
this code:
<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> it works...
i use google chrome developer tools test , discover people flash, load image used in canvas fallback
it not necessary load image used in canvas if user has flash...
how can avoid load image used in canvas if user has flash?
thank in advance
i achieve wanted. avoided loading canvas resources if user has flash installed.
this code:
<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]-->
if user has no flash suport, loads dynamically javascript code necesary create canvas animation.
in example firts loads swiffy library (https://www.gstatic.com/swiffy/v7.2.0/runtime.js)
when library loaded, loads ths js code (catarina-v02.js) create , animate canvas
this way avoided loading canvas resources if user has flash installed.
Comments
Post a Comment