隐藏DIV中的Youtube视频仅在显示DIV后才开始加载 [英] The Youtube video in my hidden DIV only starts to load after the DIV is shown
问题描述
我的页面上隐藏的DIV中有一个Youtube剪辑。
I have a Youtube clip in a hidden DIV on my page.
页面加载后我想让视频在后台安静地加载，这样当用户单击按钮以取消隐藏DIV，视频将准备就绪。
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&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&ap=%2526fmt%3D22"></object>
</div>
</body>
</html>
推荐答案
是的。使用 visibility：hidden 而不是 display：none 。 display：none 表示该元素不会呈现为DOM的一部分，因此在display属性更改为其他内容之前不会加载该元素。 visibility：hidden 加载元素，但不显示。
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.
试试这个：
<!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&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&ap=%2526fmt%3D22"></object>
</div>
</body>
</html>
这篇关于隐藏DIV中的Youtube视频仅在显示DIV后才开始加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
