Javascript 加速

我正在尝试击败此页面上的垃圾：。Jank只在手机上使用&基本上在所有手机上使用，甚至在三星Galaxy 6上也是如此。当页面被“加载”时，我用速度隐藏初始的蓝色屏幕。下面是执行此操作的代码：

  function fn_siteLoader() {
    var $siteLoader = $('.site-loader');

    $siteLoader.velocity({
      translateZ: 0,
      translateY: '-100%'
    }, {
      queue: false,
      delay: 500,
      duration: 1500,
      easing: [0.710, 0.100, 0.3, 1.000],
      complete: function() {
        $(this).remove();
        $body.addClass('is-loaded');
      }
    });
  }
  $(window).on('load', function() {
    fn_siteLoader();
  });

---

我尝试了很多黑客，比如wain中的

will change

。此外，我也没有从谷歌的时间表中获得任何见解。你知道为什么这部简单的动画如此刺耳吗？我已上载页面的非最小化版本以进行调试。

请尝试在window.onload事件中使用0秒的setInterval（）。这可能看起来有点骇人，但在过去它被用来解决一些其他的加载问题。它将创建一个单独的线程，在多核CPU中，当另一个渲染发生时，该线程不会冻结动画。但是，这可能不起作用，但很难测试，因为我无法在自己的服务器上重现问题，而且我甚至不确定其主观影响有多大。

如果性能是一个问题，我会尝试在没有Velocity的情况下执行此操作，甚至jQuery：

function whichTransitionEvent(){
  var t; var el = document.createElement('fakeelement');
  var transitions = {
    'transition':'transitionend',
    'OTransition':'oTransitionEnd',
    'MozTransition':'transitionend',
    'WebkitTransition':'webkitTransitionEnd'
  }
  for(t in transitions){
    if( el.style[t] !== undefined ){
      return transitions[t];
    } 
  } 
}

function fn_siteLoader() {
  var siteLoader = document.querySelector('.site-loader');
  siteLoader.classList.add('animating');

  var transitionEvent = whichTransitionEvent();
  transitionEvent && e.addEventListener(transitionEvent, function() {
    siteLoader.parentNode.removeChild(siteLoader);
    document.body.classList.add('is-loaded');
  });
}

document.addEventListener('DOMContentLoaded', fn_site loader);

然后，在CSS中，您只需要为“.site loader”添加样式（显然可以使用您想要的任何缓和或计时功能）：

以及对于“.site loader.animating”：

transform: translateY(-100%);

对于生产，您需要确保并添加CSS所需的任何浏览器前缀…如果需要，可以使用大量工具和资源来自动化该过程

---

这应该是非常免费的，因为我们正在使用支持GPU的CSS3动画，并且我们已经消除了jQuery和Velocity中大约65kb的依赖项。

这是在第一次发布（iPhone chrome）之后发生的。这可能是因为宽松导致了较大的浮动吗？@skobaljic页面加载后，蓝色屏幕略微向上缓和，冻结，然后快速向上缓和，变慢，然后移出屏幕。我猜提问者指的是冻结。看起来和桌面火狐上的一样。我建议使用CSS动画和JS来添加类。不需要使用Javascript制作动画。放松也可以在CSS中定义。事实上，一旦页面被缓存，放松冻结（）就会消失。此时必须渲染图像或复杂的内容（图像在启动window.onload之前加载并调整大小，但在启动window.onload之后渲染）。也可能是谷歌地图。哇，谷歌地图是罪魁祸首——我把它的初始化代码放在setTimeout中（2秒后），垃圾就消失了。如果你把这个作为答案，我会投赞成票。谢谢你的建议。很棒的片段，我一定会用的。

transform: translateY(-100%);