Jank mit Velocity

Question

Ich versuche, den Müll auf dieser Seite zu schlagen: http://mawo.olkusz.pl/. Jank ist nur auf Handy & grundsätzlich auf allen Handys, auch auf Samsung Galaxy 6. Wenn Seite "geladen" ist, blende ich anfänglich blauen Bildschirm mit Velocity. Hier ist der Code, der es tut:

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(); 
    }); 

ich zahlreiche Hacks versucht, wie will-change in Wain. Auch habe ich keinen Einblick in Googles Timeline bekommen. Irgendwelche Ideen, warum diese einfache Animation so jazzig ist? Ich habe nicht minimierte Version der Seite zum Debuggen hochgeladen.

Answer 1

Wenn die Leistung wichtig ist, würde ich versuchen, dies ohne Geschwindigkeit zu tun, und sogar jQuery was das betrifft:

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); 

Dann in Ihrem CSS werden Sie nur Arten hinzufügen müssen für‘.site- loader '(natürlich, was Lockerung oder Timing-Funktion Sie verwenden möchten):

transition: transform 1.5s 0.5s ease; 

und für' .Site-loader.animating ':

transform: translateY(-100%); 

Für die Produktion sollten Sie sicherstellen, dass alle Browserpräfixe, die für Ihr CSS erforderlich sind, hinzugefügt werden. Es gibt zahlreiche Tools und Ressourcen, um diesen Prozess zu automatisieren, falls dies gewünscht wird.

Dies sollte jetzt ziemlich verpfuscht sein, da wir GPU-fähige CSS3-Animationen verwenden, und wir haben die Notwendigkeit von Abhängigkeiten von etwa 65 kb in jQuery und Velocity entfernt.

Answer 2

Versuchen Sie eine 0 Sekunden setInterval() in Ihrem window.onload-Ereignis. Dies mag hacky aussehen, aber es wurde in der Vergangenheit verwendet, um einige andere Onload-Probleme zu umgehen. Es wird ein separater Thread erstellt, der in Multicore-CPUs Ihre Animation nicht einfriert, während ein anderes Rendering stattfindet. Dies funktioniert möglicherweise nicht, aber es ist schwierig zu testen, da ich das Problem nicht auf meinem eigenen Server reproduzieren kann, und ich bin mir nicht einmal sicher, wie subjektiv der Effekt ist.