Question

我正在尝试加载3个iframe。
窗口负载全部负载。
第一个在3Sec之后，其他人在每个10Sec延迟。

每次iframe加载firefox冻结。有什么建议吗？

修改：我的iframe。

<div id="videoContainer1">
    <iframe id="ytplayer" type="text/html" width="320" height="128" src="" 
    allowfullscreen=""></iframe>
</div>
<div id="videoContainer2">
    <iframe id="ytplayer" type="text/html" width="320" height="128" src=""
    allowfullscreen=""></iframe>
</div>
<div id="videoContainer3">
    <iframe id="ytplayer" type="text/html" width="320" height="128" src=""
    allowfullscreen=""></iframe>
</div>

我使用JQuery设置源代码我在窗口加载后设置了前3秒窗口加载后的第二个13Sec 23Sec之后的最后一次。

如果您需要我的剧本，请告诉我。

很遗憾，我没有更多信息可以提供给您。

请注意，firefox没有崩溃或只是在Iframe加载期间没有响应，所以re不是报告。

编辑2：

＆＃13;

ul {
  list-style-type: none;
}
.testing {
  height: 100em;
}
.menuContainer {
  width: 28em;
  position: fixed;
  bottom: 0%;
  padding: 0px;
  margin: 0px;
  right: -24em;
  z-index: 2;
}
.menuContainer .menuModule a {
  float: left;
  width: 4em;
  height: 4em;
}
.menuContainer.vertical .menu-link {
  border-left: 0px;
  border-top: 1px solid #fff;
}
.menuContainer .menu-link {
  padding: 1em 1.5em 0 1.5em;
  background: #555;
  color: #fff;
  border-left: 1px solid #fff;
}
.menuContainer .menuBar {
  margin: 0;
  padding: 0;
}
.menuContainer.vertical {
  width: 4em;
  bottom: -24em;
  right: 0em;
}
.menuContainer.active {
  right: 0;
}
.menuContainer.vertical.active {
  bottom: 0;
}
.scrollUpMenu {
  background: #444;
  width: 30em;
}
.slideForm {
  background: #444;
  height: 2em;
}
.menu-opener,
.menu-opener.active,
.menu-opener-inner,
.menu-opener-inner::before,
.menu-opener-inner::after,
.menuContainer,
.menuContainer.active,
.menuContainer.vertical,
.menuContainer.vertical.active,
.slide,
#email.active,
#contact.active,
#offer.active,
#chat.active,
#bulk-container,
#bulk-container.active {
  -webkit-transition: all 500ms;
  transition: all 500ms;
}
.menu-opener {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 4em;
  width: 4em;
  background: black;
}
.menu-opener.active {
  right: 20.5%;
}
.menu-opener-inner {
  position: relative;
  background: white;
  height: 0.125em;
  width: 2rem;
  top: 1.9375rem;
  left: 1rem;
}
.menu-opener-inner::before,
.menu-opener-inner::after {
  background: white;
  content: '';
  display: block;
  height: 2px;
}
.menu-opener-inner::before {
  -webkit-transform: translateY(-0.35rem);
  -ms-transform: translateY(-0.35rem);
  transform: translateY(-0.35rem);
}
.menu-opener-inner::after {
  -webkit-transform: translateY(0.25rem);
  -ms-transform: translateY(0.25rem);
  transform: translateY(0.25rem);
}
.menu-opener-inner.active {
  background: transparent;
}
.menu-opener-inner.active::before {
  -webkit-transform: translateY(0rem) rotate(-45deg);
  -ms-transform: translateY(0rem) rotate(-45deg);
  transform: translateY(0rem) rotate(-45deg);
}
.menu-opener-inner.active::after {
  -webkit-transform: translateY(-0.1rem) rotate(45deg);
  -ms-transform: translateY(-0.1rem) rotate(45deg);
  transform: translateY(-0.1rem) rotate(45deg);
}
.slide {
  width: 24em;
  height: 29em;
  position: fixed;
  padding: 0px;
  margin: 0px;
  right: 0em;
  bottom: -29em;
  background: black;
  color: white;
  z-index: 0;
}
#email .formContainer {
  width: 20em;
  height: 24em;
  position: relative;
  left: 2em;
  top: 1em;
}
#email p {
  padding: 0;
  margin: 0;
}
#email hr {
  padding: 0;
  margin: 0;
}
#email .innerSeparator {
  padding: 0 0 1em 0;
  margin: 0;
}
#email .submitBody {
  background: black;
  height: 5em;
}
#email .submit {
  width: 8em;
  height: 2em;
  position: relative;
  left: 8em;
  top: 1em;
}
#email.active {
  bottom: 4em;
}
#contact.active {
  bottom: 4em;
  height: 9em;
}
#offer.active {
  bottom: 4em;
  max-height: 29em;
  overflow-y: auto;
}
#offer .offerModule {
  width: 20em;
  background-color: white;
  color: black;
  position: relative;
  left: 2em;
  margin: 1em 0 0 0;
  padding: 0 0 1em 0;
}
.offerModule fieldset {
  position: relative;
  width: 18em;
  margin: 0;
  padding: 0;
  left: 1em;
}
#chat.active {
  width: 26em;
  height: 30em;
  bottom: 4em;
}
#chat iframe {
  width: 100%;
  height: 100%;
}
.search {
  position: absolute;
  width: 100%;
  padding: 1em 0;
  background-color: black;
  height: 6em;
  z-index: 200;
}
.search .searchbar {
  position: absolute;
  width: 100%;
}
#bulk-container {
  position: absolute;
  /*top: 6em;*/
  display: none;
  width: 100%;
}
#bulk-container.active {
  top: 6em;
  display: block;
  background-color: grey;
}
#bulkSearch {
  padding-top: 1em;
}
#bulkSearch input {
  height: 10em;
}
#videoContainer {
  position: absolute;
  top: 30%;
  left: 5%;
}

＆＃13;

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/mainStyle.css">
  <link rel="stylesheet" href="css/slideMenu.css">
  <script src="js/vendor/jquery.js"></script>
  <script src="js/vendor/jquery-ui.js"></script>
</head>

<body>
  <div class="testing">
    test
  </div>
  <div id="videoContainer1">
    <iframe id="video1" type="text/html" width="320" height="128" src="" allowfullscreen=""></iframe>
  </div>
  <div id="videoContainer2">
    <iframe id="video2" type="text/html" width="320" height="128" src="" allowfullscreen=""></iframe>
  </div>
  <div id="videoContainer3">
    <iframe id="video3" type="text/html" width="320" height="128" src="" allowfullscreen=""></iframe>
  </div>
  <script type="text/javascript">
    $('#bulk, #bulkClose').on('click', function(e) {
      $('#bulk-container').toggleClass('active');
      $('.searchbar').toggle();
    });
    $(document).ready(function() {
      if ($(window).width() < 481) {
        $('.menuContainer').addClass('vertical');
      }
    });
    $(window).resize(function() {
      if ($(window).width() < 481) {
        $('.menuContainer').addClass('vertical');
      } else {
        $('.menuContainer').removeClass('vertical');
      }
    });
    $('.menu-link').on('click', function(e) {
      e.preventDefault();
      var father = $(this).closest('li').attr('class');
      if (father == "top") {
        window.scrollTo(0, 0);
      } else if ($('#' + father).hasClass('active')) {
        $('#' + father).toggleClass('active')
      } else {
        $('.slide.active').toggleClass('active')
        $('#' + father).toggleClass('active')
      }
    });
    $('.menu-opener').on('click', function() {
      $('.menuContainer, .menu-opener-inner').toggleClass('active');
      $('.slideUpForm .active').removeClass('active');
    });
    $(window).load(function() {
      setTimeout(function() {
        console.log('video 1');
        console.log(Date());
        $('#videoContainer1 iframe').attr({
          'src': 'http://www.youtube.com/embed/lxq5kQZvNts?origin=http://youtube.com'
        })
        setTimeout(function() {
          console.log('video 2');
          console.log(Date());
          $('#videoContainer2 iframe').attr({
            'src': 'http://www.youtube.com/embed/lxq5kQZvNts?origin=http://youtube.com'
          })
          setTimeout(function() {
            console.log('video 3');
            console.log(Date());
            $('#videoContainer3 iframe').attr({
              'src': 'http://www.youtube.com/embed/lxq5kQZvNts?origin=http://youtube.com'
            })
          }, 10000);
        }, 10000);
      }, 3000);
    });
  </script>
</body>

</html>

＆＃13;

iframe冻结了Firefox

0 个答案: