加載視頻時顯示加載圖標javascript

Question

我想加載視頻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。怎麼做？

Answer 1

請您click函數中添加以下CSS屬性：

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

您還需要CSS屬性display:inline-block;添加到#newID，如果顯示是inline（默認值）。

用實際加載圖像替換http://mysite/myloadingimage.gif。使用動畫GIF的漂亮的加載效果。

加載圖片需要使用CSS背景屬性居中。這可能取決於圖像的大小。