isa*_*yno 4 javascript youtube jquery visibility
我的页面上隐藏的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&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加载元素,但不显示它.
试试这个:
<!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>