我隐藏的 DIV 中的 Youtube 视频仅在显示 DIV 后才开始加载 [英] The Youtube video in my hidden DIV only starts to load after the DIV is shown

查看：23
本文介绍了我隐藏的 DIV 中的 Youtube 视频仅在显示 DIV 后才开始加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的页面上的隐藏 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"><头><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</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();});});<身体><button id="show_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="电影"><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>

解决方案

是的.使用 visibility:hidden 而不是 display:none.display:none 意味着该元素不会作为 DOM 的一部分呈现，因此在 display 属性更改为其他内容之前不会加载它.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"><头><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</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');});});<身体><button id="show_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="电影"><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>

I have a Youtube clip in a hidden DIV on my page.

After the page has loaded I wanted the video to load quietly in the background so that when the user clicks the button to "un-hide" the DIV, the video will be ready to go.

But the way I have it now, the video starts to load only after the user clicks the button.

Is there a change I could make here to have the video loaded in the background and then just hide or show it based on the button click?

<!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>

解决方案

Yep. Use visibility:hidden instead of display:none. display:none means that the element isn't rendered as part of the DOM, so it's not loaded until the display property changes to something else. visibility:hidden loads the element, but does not show it.

Try this: 

<!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>

这篇关于我隐藏的 DIV 中的 Youtube 视频仅在显示 DIV 后才开始加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆