javascript - 页面加载期间脚本出现卡顿

Question

我有一个这个脚本 http://jsfiddle.net/evzb28jf/2/但在动画的第一部分它会断断续续。我怀疑这是因为它正在加载整个网站。有没有办法加载 block 或其他什么？启动页面持续约 3.5 秒。

<div id="splash">
<div class="square">Darrien Tu . <span class="l1"></span>
 <span class="l2"></span>
 <span class="l3"></span>
 <span class="l4"></span>

   </div>
</div>

Answer 1

嗯，我无法给出完整的答案，因为我不知道你的脚本是如何加载的。

如果您使用$(function(){ ... })，$(document).ready(function(){ ... }) ，或 document.addEventListener("DOMContentLoaded", function(){}) 加载脚本，您可以尝试 $(window).load(function(){ ... }) 或 window.onload(对于 native )作为替代方案。

如果问题仍然存在，您可以将其封装在较短的 setTimeout() 中，例如页面加载后 1 秒。

TweenLite.defaultEase = Linear.easeNone;

//show the square only once js has run
//visibility set to hidden in css panel
TweenLite.set(".square", {
    visibility: "visible"
});

var tl = new TimelineLite();

setTimeout(function(){
  tl.fromTo(".l1", 2, {
      height: 0
  }, {
      height: 102
  })
  .fromTo(".l2", 5, {
    width: 0,

  }, {
    width: 312

  })
  .fromTo(".l3", 2, {
    height: 0
  }, {
    height: 102
  })
  .fromTo(".l4", 5, {
    width: 0
  }, {
    width: 312
  })

  tl.timeScale(4) //play faster
}, 1000)

另请记住，这实际上取决于客户。有些客户端比其他客户端更好，而且您还使用 JavaScript 来制作动画，这在某些情况下(也取决于库)确实不是最好的主意。