エレメントが初めてアニメーション化されるときにフェード・ラグが発生する

Question

エレメントをフェードインするタイミングを制御するカスタム・ボタンがあります（Jqueryで実行されます）。ほとんどの場合、機能は私がそれを期待する方法です。唯一の問題は、最初にボタンのいずれかを押したときにアニメーションが遅れていることです（時には完全にスキップするように見えることがあります）。私はこれがコンテンツの最初の読み込みと最初の読み込み後の後続のキャッシュと関係があると考えています。

ここでのコードの抜粋です：

$('.content').hide(); 
$('.button').click(function() { 
    if ($(this).hasClass('active')){ 
     if (!state.isExpanded){ 
      $('.button').animate({height: '5vw', width: '5%'}, 500); 
      $('#button-container').animate({height: '100%', width: '100%'}, 500); 
      showSection($(this), 1000); 
... 
... 

はshowSection：私はイラストレーターで2.2という最大の単一のオブジェクトを作成した複数のカスタムSVG画像の中にロードしようとしていることは注目に値する

function showSection(elem, duration) { 
    var elemID = $(elem).attr('id'); 
    console.log(elemID); 
    switch(elemID){ 
     case 'person-icon': 
     $(aboutMeSection.ID).find('.content').fadeIn(duration); 
     break; 
    ... 
    ... 

mB。これは私のウェブサイトを初めて作ったので、合理的なサイズがメディア要素であることがわかりません。これは大きすぎるかもしれませんか？

Answer 1

私が使用していたSVGイメージが大きすぎます。ちょうどこの質問は、同様の問題を抱えている人にとっては完全な無駄ではありません。

• 使用しているイメージがSVGである必要があるかどうかを検討してください。 noobieとして、私は最近の人気に巻き込まれ、PNGがうまくいくときSVGとして作成したすべてのイメージを保存しました。

• 私が前に何をすべきかを考え出し読んでいたSVGの最適化には良い記事：

  Optimizing SVGs for Web Use