js小技巧:延时加载Flash
时间:2022-04-23
本文章向大家介绍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>
运行代码 (注:如果点击运行代码后报js错误,请在页面上右击选择编码为utf-8)
- 【1120-WEB零基础课】| 单例模式,下周要讲
- 使用gerrit作为代码评审工具
- 如何重构你的时间序列预测问题
- 【聊】我个人眼里的ReactJs生态系统
- [WCF REST] Web消息主体风格(Message Body Style)
- apache配置https服务
- [WCF 4.0新特性] 默认绑定和行为配置
- mysql数据库及django用户名启用中文的方法
- 【学习笔记】先行者课程0109-rotate3d_变量、堆、栈
- 通过WCF扩展实现消息压缩
- Linux系统中的信号量机制
- 基于Linux与lpc3250开发板的交叉开发环境搭建
- WCF中关于可靠会话的BUG!!
- [WCF安全系列]谈谈WCF的客户端认证[Windows认证]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- RTSP流媒体协议视频平台EasyNVR和EasyNTS智能云组网同一浏览器运行为什么会导致EasyNTS无法登陆?
- Java:手写线程安全LRU缓存X探究影响命中率的因素
- 视频上云/网络穿透/网络映射服务EasyNTS设备管理为什么会出现无法搜索到设备的情况?
- 快速打造属于你的接口自动化测试框架
- 大数据下的质量体系建设
- PostgreSQL 日志系统 及 设置错误导致磁盘塞满案例
- 六、乘胜追击,将剩下的Git知识点搞定
- 树莓派基础实验39:解析无线电接收机PWM、SBUS信号
- nodejs源码分析第十九章 -- udp模块
- Spark Extracting,transforming,selecting features
- 逆向so文件调试工具ida基础知识点
- 二叉搜索树中的众数
- 了解递归:普通函数递归和非递归栈式实现之间的区别
- 字节真题 ZJ26-异或:使用字典树代替暴力破解降低时间复杂度
- curl命令半天没响应,有可能返回内容导致session挂了