1

Imagine that i have a constant animation running, rather it be css, javascript, or in this case for the sake of simplicity a .gif file, and then i append to the DOM a "heavy" element like a youtube iframe and the constant animation get sluggish for a second.

Is there any straightforward or workaround way to achieve such DOM change without staggering the animation?

In the example below notice that if you change the iframe for yet another gif or even one iframe with a fairly simple website the animation runs without staggering or getting sluggish.

Demo/Example: http://codepen.io/anon/pen/xbdewR

stackoverflow is throwing a warning that links to codepen.io must be accompanied with code, it is my first time posting so i hope this is what it is asked for:

$('.button').on('click', function(e) {
  // Sluggish
  $('.video-container').html('<iframe width="560" height="315" src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" allowfullscreen></iframe>');

  // Not Sluggish
  //$('.video-container').html('<img src="http://media2.giphy.com/media/e7FOBuKCDtwWI/giphy.gif"/>');

  // Not Sluggish
  //$('.video-container').html('<iframe width="560" height="315" src="http://html5doctor.com/" frameborder="0" allowfullscreen></iframe>');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://media.giphy.com/media/lRBEntSxN87WE/giphy.gif" alt="" />
<div class="video-container">
  <a class="button" href='#'>wait for the gif to load completely and press me</a>
</div>
0Ds0
  • 598
  • 5
  • 19
  • 1
    there is only one main thread per tab, and both dom re-layout and gif animations use it. some video may be hardware accelerated, but loading it will likely always slow down the rendering. – dandavis Jan 28 '15 at 00:04

3 Answers3

1

Unfortunately, there is no solution to your problem... It is a matter of web browsers.

This post may help you: Why does my spinner GIF stop while jQuery ajax call is running?

Community
  • 1
  • 1
Adrien Cadet
  • 1,311
  • 2
  • 15
  • 21
0

Loading an iframe is going to cause massive delay with loading, layout and DOM changes.

You may be able to decrease some of that impact by making the iframe display: none until it's needed, then rendering it with display: block .. not sure if you have enough control over the iframe video to be able to make it not autoplay even if it's invisible, though.

Eric Blade
  • 161
  • 7
0

You can do the following :

write the html code for your iframe with style as display : none

<iframe width="560" height="315" src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" style="display:none;" allowfullscreen></iframe>

and when you click the button then the code js code should be : 

$('.button').on('click', function(e){
    $('iframe').css('display','block');
});

in this way your gif file won't be sluggish.

Robin
  • 471
  • 6
  • 18
  • Nope, that does not work the staggering still happens with the display none, same fix that @eric-blade mentioned – 0Ds0 Jan 29 '15 at 10:25