js实现延时加载Flash的方法


Posted in Javascript onNovember 26, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
js实现文字截断功能
Sep 14 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 #Javascript
学习JavaScript设计模式(继承)
Nov 26 #Javascript
js图片跟随鼠标移动代码
Nov 26 #Javascript
学习JavaScript设计模式(封装)
Nov 26 #Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 #Javascript
学习JavaScript设计模式(接口)
Nov 26 #Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 #Javascript
You might like
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP生成树的方法
2015/07/28 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
js表头排序实现方法
2015/01/16 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
深入理解js promise chain
2016/05/05 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python 容器总结整理
2017/04/04 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
Python基本socket通信控制操作示例
2019/01/30 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
python实现3D地图可视化
2020/03/25 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
任意存:BOXFUL
2018/05/21 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
房地产出纳岗位职责
2013/12/01 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
求职信的正确写法
2014/07/10 职场文书
销售人员工作自我评价
2014/09/21 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
MySQL创建管理HASH分区
2022/04/13 MySQL
nginx配置指令之server_name的具体使用
2022/08/14 Servers