Заикание на скрипте во время загрузки страницы

У меня есть этот скрипт 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>

источник

2015-08-05 user2252219

Попробуйте запустить запуск, если анимация после задержки 500 мс. Это взломать, но может дать вам время для загрузки. Или, если на то пошло, но задержка на 5 секунд и посмотреть, все ли это происходит. Вопрос может быть не связан с предоставлением других активов. Если он исчезнет после того, как все остальное загрузило только огонь, обратный вызов для запуска анимации. Вы могли бы смотреть в обещания, но это было бы убивать за что-то вроде этого. – Swordfish0321

@ Swordfish0321 Хммм, поставив задержку в 1,5 секунды, казалось, делал ее менее прерывистой. Как сделать обратный вызов? – user2252219

Ну, я не могу дать полный ответ, потому что я не знаю, как загружается ваш скрипт.

Если вы используете $(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 для анимации, который в некоторых сценариях (также в зависимости от библиотеки) действительно не лучшая идея.

источник

2015-08-05 02:39:49

Заикание на скрипте во время загрузки страницы

ответ

Смежные вопросы