2017-10-16 7 views
0

私の一部のスクリプト(下記参照)に 'async'を追加しましたが、トップリンクスクリプトは表示されないか、機能しません。私はJavaScriptを大量によく知らないので、答えを見つけることができないと思いますか?以下は本文の下部にあるコードです:asyncとインラインJavaScriptを使用

<div class="sprite topsite active" style="display: none;"> 
<a href="#nav">Back to top arrow</a> 
</div> 

<script async src="content/js/hideaddressbar.min.js"></script> 
<script async src="content/js/respond.min.js"></script> 
<script async type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script async src="content/js/picturefill.min.js"></script> 

<!-- back to top link --> 
<script> 
    $(document).ready(function() { 
     // Show or hide the sticky footer button 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 200) { 
       $('.topsite').fadeIn(500); 
      } else { 
       $('.topsite').fadeOut(300); 
      } 
     }); 

     // Animate the scroll to top 
     $('.topsite').click(function(event) { 
      event.preventDefault(); 

      $('html, body').animate({scrollTop: 0}, 300); 
     }) 
    }); 
</script> 

ありがとうございました、ありがとうございます!

+1

注意: '' async'を使用すると、ブラウザはHTMLページを読み込み、ブラウザが同時にスクリプトをロードして実行する間にレンダリングしますが、 'defer'を使用するとブラウザはスクリプトを実行します。ページの解析が完了しました。また、あなたの場合、インラインスクリプトはすべての 'async'スクリプトの前に実行されることに注意してください。 – Krusader

+0

あなたは 'async'を使って言いましたが、非同期的なものは見えません – kchason

+0

ブラウザのコンソールを確認してください。$が定義されていないというメッセージが表示されます。あなたには驚かないはずですが、結局のところ、jQueryのソースコードを含むファイルをいつロードするか気にしないとブラウザに指示しました。だから、あなたの変更を取り消すか、あなたがやっていることとそれを修正/緩和する方法を正しく読んでください。 – CBroe

答えて

1

インラインスクリプトはjQueryに依存しています。したがって、jQueryを非同期でロードすると(jQueryがバックグラウンドでロードされている間にページがロードされ続ける)、jQueryがロードされるまでスクリプトを待機する必要があります。

私はあなたが他のスクリプトの基礎となるように、最初に同期的にjQueryをロードすることをお勧めします。

async-attributeは、document.readyで不要なスクリプトを並列に読み込むことで読み込み速度を向上させるためのものです。

関連する問題