我隐藏的 DIV 中的 Youtube 视频仅在显示 DIV 后才开始加载

2023-12-09

我的页面上的隐藏 DIV 中有一个 Youtube 剪辑。

页面加载后,我希望视频在后台安静地加载,这样当用户单击“取消隐藏”DIV 按钮时,视频就可以播放了。

但按照我现在的方式,视频仅在用户单击按钮后才开始加载。

我可以在这里进行更改,将视频加载到后台,然后根据按钮单击隐藏或显示它吗?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function()
    {
      $("#show_video").click(function(){
          $("#hello").show();  
      });
    });
    </script>

</head>

<body>

<button id="show_video">Show The Video</button>
<div id="hello" style="display:none;">
<object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22"></object>
</div>


</body>
</html>

是的。使用visibility:hidden代替display:none. display:none意味着该元素不会作为 DOM 的一部分呈现,因此在显示属性更改为其他内容之前不会加载该元素。visibility:hidden加载元素,但不显示它。

尝试这个:

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
       <script type="text/javascript">
        $(document).ready(function()
        {
          $("#show_video").click(function(){
              $("#hello").css('visibility','visible'); 
          });
        });
        </script>

    </head>

    <body>

    <button id="show_video">Show The Video</button>
    <div id="hello" style="visibility:hidden;">
    <object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22"></object>
    </div>


    </body>
    </html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我隐藏的 DIV 中的 Youtube 视频仅在显示 DIV 后才开始加载 的相关文章

随机推荐

  • 处理屏幕方向 - Android

    我的应用程序中的屏幕方向出现问题 我在 res layout lan 文件夹中为横向模式创建了备用布局 问题发生在方向改变时 1 重新创建一个活动而不破坏旧的活动 2 由于我在应用程序中使用媒体播放器 因此在屏幕旋转时 mp3 同时在两个方
  • Apache:客户端被服务器配置拒绝

    我正进入 状态 2012 年 4 月 24 日星期二 12 12 55 错误 客户端 127 0 0 1 客户端被服务器配置拒绝 labs Projects Nebula bin 我的目录结构如下所示 我使用的是 Symfony 2 其他
  • 为什么自托管 gitlab 运行程序在克隆存储库并在自托管运行程序上执行作业时遇到问题

    我目前正在研究 GitLab 运行程序 以更好地了解它们在 CI CD 管道环境中的工作方式 我按照 GitLab 文档中的说明创建了一个自我管理的运行器 即我的个人 Windows 笔记本电脑 安装了 GitLab Runner 可执行文
  • 是否可以使用私有 API 在 iPhone 上运行后台进程?

    我不打算将应用程序发送到商店 而是进行有限分发 我在想 如果我可以使用私有 API 进行后台处理 那么我就可以加入 iphone 开发者企业计划 并在我的公司内分发一个在后台运行的应用程序 我想这个问题的延伸是 如果我是一名企业开发人员 有
  • 将数据库从 Postgres 迁移到 MySQL [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我已更改数据库PostgreSQL to mysql 但我不知道如何将数据从一个传输到另一个 有谁知道我可以从中复制 迁移数据库的任何命令Postg
  • 使用 GDI+ 调整图像大小

    我真的很想从这段代码中找出更多的性能 它不是大量使用的代码 但每次上传新图像时都会使用 并且每个图像使用 4 次 100px 200px 500px 700px 因此 当处理的图像超过 2 或 3 个时 服务器会变得有点忙 另外 我正在尝试
  • 如何从 displaytag 中的 struts2 复选框获取复选框值到操作类

    我正在研究struts2我正在使用的应用程序显示标签用于分页支持 现在我想要表中的每一行都有一个复选框 因为我正在这样做
  • Uml / 序列 / 包 / ... JavaScript 和 Electron 应用程序的图表替代方案?

    我的问题是是否可以绘制任何类型的图表来可视化 Electron JavaScript 应用程序 我需要不同的 uml 图的替代方案 比如类或包图 但由于 JS 是基于原型的 它不像 Java 或 C 我不知道我能做什么 我唯一能够制作的是序
  • 固定位置在 Chrome 中不起作用

    我正在创建这些叠加的上一个和下一个箭头 就像这个网站上的那样 http www usatoday com 我遇到的问题是在 Chrome 中 箭头不会保持固定 当我向下滚动页面时 箭头会随着页面上升 你再也看不到它们了 奇怪的是 在 Fir
  • 检测用户对 OpenGL 方块的触摸[重复]

    这个问题在这里已经有答案了 可能的重复 如何确定屏幕上 3D 空间中触摸的内容 我正在开发一个 Android 应用程序 我也在使用 OpenGL 图形 我在屏幕上画了一个正方形 我想让用户在触摸它时移动它 换句话说 当用户将手指放在方块上
  • 遍历 Excel 下拉列表/验证列表

    我有一个带有验证列表的单元格 该列表会根据其他设置而变化 是否可以在代码中迭代该单元格 是否也可以将该单元格设置为列表中的第 n 项 Example The drop down for E2 depends on what was sele
  • django - 用户注销后存储会话值

    使用 Djangologout当用户注销时 所有会话值都会被刷新 即使用户注销 我也有办法保留一些会话值吗 您可能希望使用 cookie 而不是 session 来实现此目的 views py login view After you ha
  • CSV 写入需要唯一分隔符的文本字符串

    我用 python 编写了一个 HTML 解析器 用于提取数据 使其在 csv 文件中看起来像这样 itemA itemB itemC Sentence that might contain commas or colons like th
  • 如何找到 numpy 轴上的最终累积和? [复制]

    这个问题在这里已经有答案了 我有一个 numpy 数组 np array data shape 50 50 现在 我想找到 axis 1 上的累积和 问题是 cumsum 创建了一个累积和数组 但我只关心每一行的最终值 这当然是不正确的 n
  • Android:如何在旋转后恢复停止的计时器状态?

    我这样做是为了保存状态并在计时器运行时旋转后恢复状态 Android Chronometer 暂停 当我将计时器停止在 X 秒 然后在 Y 秒后我更改方向时 计时器会标记 X Y 秒 我想将停止的天文钟的时间保留为旋转之前的时间 无论已经过
  • 将 2D JavaScript 数组转换为 1D 数组 [重复]

    这个问题在这里已经有答案了 我想将 2D JavaScript 数组转换为 1D 数组 以便 2D 数组的每个元素都将连接成一个 1D 数组 在这里 我正在尝试转换arrToConvert到一维数组 var arrToConvert 0 0
  • 反射?我该怎么做?

    这超出了我的理解范围 有人可以更好地向我解释吗 http mathworld wolfram com Reflection html 我正在制作一款 2d 突破格斗游戏 因此我需要球在撞到墙壁 桨或敌人 或敌人撞到它 时能够反射 他们所有的
  • 自动滑动 jQuery jCarousel Lite 不工作

    我有一个div它包含这样的元素 div class anyClass ul class slider ctre li class outer prdcts li ul div
  • 在 iOS10 中使用 AVCapturePhotoOutput - NSGenericException

    我目前正在尝试弄清楚如何使用 iOS 10 的 AVCapturePhotoOutput 方法 但遇到了困难 我觉得我即将做对 但仍然收到错误 由于未捕获的异常 NSGenericException 而终止应用程序 原因 AVCapture
  • 我隐藏的 DIV 中的 Youtube 视频仅在显示 DIV 后才开始加载

    我的页面上的隐藏 DIV 中有一个 Youtube 剪辑 页面加载后 我希望视频在后台安静地加载 这样当用户单击 取消隐藏 DIV 按钮时 视频就可以播放了 但按照我现在的方式 视频仅在用户单击按钮后才开始加载 我可以在这里进行更改 将视频