我的页面上的隐藏 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 的一部分呈现,因此在显示属性更改为其他内容之前不会加载该元素。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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)