비동기 및 인라인 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>

감사의 말에 감사드립니다. 감사합니다.

출처

2017-10-16 Michael

"async'를 사용하면 브라우저가 HTML 페이지를로드하고 브라우저가 동시에 스크립트를로드하고 실행하면서 렌더링합니다. 그러나 'defer'를 사용하면 브라우저가 페이지가 구문 분석을 마쳤습니다. " 또한 당신의 경우 인라인 스크립트는 모든 async 스크립트 전에 실행될 수 있습니다. – Krusader

'async'를 사용하여 언급했지만 비동기로 보이는 부분이 보이지 않습니다. – kchason

브라우저 콘솔을 확인하십시오. $가 정의되지 않았다는 메시지가있을 것입니다. 어쨌든 당신은 브라우저에 jQuery 소스 코드가 들어있는 파일을로드 할 때 상관하지 않는다고 말했습니다. 따라서 변경 사항을 되돌 리거나 수행중인 내용과 수정/완화 방법에 대해 올바르게 읽으십시오. – CBroe

인라인 스크립트는 jQuery에 종속됩니다. 따라서 jQuery를 비동기 적으로로드하면 (jQuery가 백그라운드에서로드되는 동안 페이지가 계속로드됩니다) jQuery가로드 될 때까지 스크립트를 기다려야합니다.

다른 스크립트의 기초가 될 수 있도록 jQuery를 먼저 동 기적으로로드하는 것이 좋습니다.

async-attribute는 document.ready에서 필요하지 않은 스크립트를 병렬로로드하여로드 속도를 높이기위한 것입니다.

출처

2017-10-16 11:07:40 zoku

비동기 및 인라인 JavaScript 사용

답변

관련 문제