Добавление iframe задерживает анимацию JavaScript

Question

Я создаю лайтбокс, когда он открывается, я добавляю iframe (универсальный код для вставки iframe vimeo), но запущена еще одна анимация, а именно описание, которое выдвигается внизу экрана.

В момент добавления все, кажется, немного останавливается, возможно, из-за того, что iframe занимает все ресурсы?Есть ли способ предотвратить это?

Когда я тестирую, не добавляя iframe (показывая черный экран), все идет гладко.Мне нужно, чтобы эти анимации происходили одновременно.

Answer 1

Если вы не воспроизводите видео автоматически при загрузке, лучший способ - загрузить только изображение вместо самого видео.

Вот пример использования изображения и автозапуска вместо загрузки видео:http://embedly.github.com/embedly-jquery/examples/autoplay.html

Код выглядит примерно так:

$(document).ready(function() {
    //Replace the url with an image
    $(".video a").embedly({maxWidth: 500,
                       autoplay: true,
                       success : function(oembed, data){
                         //replace the a tag with an image
                         var d = $('<a href="#" class="play"><span></span></a>')
                              .css('background-image', 'url('+oembed.thumbnail_url+')')
                              .data('oembed', oembed);
                         data.node.replaceWith(d);
                       }
                    });
    // When the user clicks play the video is loaded inline.
    $('a.play').live('click', function(e){
      e.preventDefault();
      $(this).replaceWith($(this).data('oembed').html);
    });
  });