Question

我有一个这样的剧本http://jsfiddle.net/evzb28jf/2/但是在动画的第一部分它结结巴巴。我怀疑它是因为它将整个网站加载到它后面。有没有办法加载块或什么？启动页面持续约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（对于原生代码））作为替代方案。

如果您仍然遇到问题，可以将其换成短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来制作动画，在某些情况下（也取决于图书馆）确实不是最好的主意。

在页面加载期间在脚本上出现问题

1 个答案: