0

我正在尝试在我的网页中加载视频 onclick 图像。为此，我使用了以下代码。

  <script type="text/javascript">
(function($) {
$('a.newID').click(function(){ 

$('#newID').html('<iframe src="http://www.youtube.com/embed/TJ2X4dFhAC0?autoplay=1"  frameborder="0" class="slide" allowtransparency="true" style="width:512px; height:288px;" id="ifm" title=""></iframe>');

});
}(jQuery));
</script>

html代码：

<a href="#" title="" id="newID"><span class="play_icon"><img src="img/play_overON.png" alt=""></span>
    <img src="images/slider1.jpg" alt="" class="slide" />
    </a>

如果我单击图像，图像将被 iframe 视频替换。我需要的是display a loading icon直到video是loading。怎么做？

4

1 回答 1

2

click请在您的函数中添加以下 css 属性：

 #newID {background-image:url(http://mysite/myloadingimage.gif)}

如果显示为（默认） ，您还需要将 css 属性添加display:inline-block;到#newID 。inline

替换http://mysite/myloadingimage.gif为实际加载图像。使用动画 gif 以获得漂亮的加载效果。

加载图像需要使用 css 背景属性居中。这可能取决于图像的大小。

于 2012-12-21T06:38:23.970 回答