Question

我正在尝试加载视频，在我的网页上点击图片。为此，我使用了以下代码。

  <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。怎么做？

Answer 1

请在click功能中添加以下css属性：

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

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

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

加载图片需要使用css background属性进行居中。这可能取决于图像的大小。

加载视频javascript时显示加载图标

1 个答案: