这篇文章主要介绍了 js 实现延时加载 Flash 的方法, 较为详细的分析了通过元素替换实现 JavaScript 延时加载 flash 的相关原理与实现技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现延时加载 Flash 的方法。分享给大家供大家参考,具体如下:
当页面中包含自动播放视频的 flash 播放器时,flash 的流媒体播放会一直不停的下载视频 (哪怕你点击了播放暂停 / 停止也一样在不停下载),这样会影响到页面其它元素的加载。
最简单的优化办法就是让 Flash 一开始不要播放:当然,你可以修改 fla 源文件,让视频播放一开始就处于暂停,直到用户点击了播放按钮。但问题是,如果您嵌入的是没有源文件的 flash 动画,这种路子就走不通了。
思路:
可以先在放置 flash 的地方,放一张小图片,点击图片后再把图片元素换成对应的 object 标签。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- swf占位符
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
- </script>
- <script type="text/javascript">
- $().ready(function() {
- $("#rbtvs_play_pos").click(function() {
- $("#swfPos").html("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0\" width=\"226\" height=\"338\" id=\"rbtvs_player\" align=\"middle\" style=\"z-index: -999\"><param name=\"allowScriptAccess\" value=\"Always\" /><param name=\"allowFullScreen\" value=\"false\" /><param name=\"movie\" value=\"http://img.rbtvs.com/swf/rbtvs_player.swf\" /><param name=\"quality\" value=\"high\" /><param name=\"bgcolor\" value=\"#efefef\" /><param name=\"wmode\" value=\"opaque\" /><embed src=\"http://img.rbtvs.com/swf/rbtvs_player.swf\" quality=\"high\" bgcolor=\"#efefef\" width=\"226\" height=\"338\" name=\"rbtvs_player\" align=\"middle\" allowscriptaccess=\"Always\" allowfullscreen=\"false\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.adobe.com/go/getflashplayer\" /></object>");
- })
- })
- </script>
- </head>
- <body>
- <div id="swfPos">
- <img id="rbtvs_play_pos" src="http://img.rbtvs.com/bihu001/images/rbtvs_play.gif"
- style="cursor:pointer" alt="点击播放视频" />
- </div>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: