CODEWITHSUNDEEP
javascriptjqueryhtml
Sam Hanson
Sam Hanson

Reputation: 1357

show loading icon while loading video javascript

I am trying to load a video onclick a image in my web page. For that i used the following code.

  <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>

The html code:

<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>

If i click the image the image will be replaced by the iframe video. What i need is to display a loading icon until the video is loading. How to do that?

Upvotes: 0

Views: 1869

Answers (1)

closure
closure

Reputation: 7452

Please add following css properties in your click function:

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

You will also need to add css property display:inline-block; to #newID, if the display is inline (default).

Replace http://mysite/myloadingimage.gif with actual loading image. Use animated gif for the nice loading effect.

Loading image needs to be centered using css background property. This may depend on size of image.

Upvotes: 2

Related Questions