Java Script, jQuery : 스크립트 동적 로드 : 방법, 예제, 구현

Java Script, jQuery : 스크립트 동적 로드 : 방법, 예제, 구현

 

웹 사이트 속도를 높이는 일반적인 방법은 지연 로딩이라는 기술을 사용하는 것입니다. 즉, 처음에 페이지에 필요한 모든 것을 로드하는 대신 필요할 때만 리소스를 로드합니다.

예를 들어 이미지를 느리게 로드 할 수 있으므로 페이지를 올바르게 보는 데 필요한 이미지로만 페이지를 시작할 수 있으며, 보이지 않는 다른 이미지는 바로로드 할 필요가 없습니다. 사용자가 페이지를 아래로 스크롤하면 이미지를 볼 수 있는지 찾고 필요할 때 이미지를 느리게 로드 할 수 있습니다.

JavaScript 또는 CSS 파일과 같은 다른 리소스를 사용하여 동일한 작업을 수행 할 수 있으며 스크립트를 언제 사용해야하는지 스크립트에 로드 할 수 있습니다. 과거에 사용한 예는 버튼의 클릭 이벤트에 Disqus 주석을 로드하는 것입니다. 이 jQuery 코드는 Disqus Javascript 파일에 로드되고 선택한 div에서 Disqus 코드를 초기화합니다.

 

$j=jQuery.noConflict();

$j(document).ready(function() {
    $j('.showDisqus').on('click', function(){   // click event of the show comments button
        var disqus_shortname = 'enter_your_disqus_user_name';  // Enter your disqus user name

                // ajax request to load the disqus javascript
        $j.ajax({
             type: "GET",
             url: "http://" + disqus_shortname + ".disqus.com/embed.js",
             dataType: "script",
             cache: true
         });

            $j(this).fadeOut();  // remove the show comments button
    });
});

 

 

 

Ajax Method

위의 코드에서 볼 수 있듯이 .showDisqus 버튼의 클릭 이벤트가 있습니다.이 안에 jQuery 메소드 .ajax ()를 사용하여 Disqus를 응용 프로그램에 포함시키는 스크립트를 GET 요청합니다. ajax 메소드는 일반적으로 서버 측 스크립트에 기본 http 요청을하고 스크립트의 출력을 리턴하는 데 사용됩니다.

 이 경우 GET 요청을하고 dataType을 스크립트로 설정합니다. 이것은 jQuery가 마치 새로운 JavaScript 파일을 포함하는 것처럼 리턴을 처리하도록 지시합니다. 그러면 스크립트 끝에 타임 스탬프 매개 변수를 추가하여 스크립트에서 브라우저 캐싱이 비활성화됩니다. 스크립트 캐싱을 사용하려면 cache : true 매개 변수를 포함시켜야합니다.

 

$.ajax({
    type: "GET",
    url: "http://test_script.js",
    dataType: "script",
    cache: true
});

 

 

 

Get Script Method

GET 아약스를 통해 스크립트를 얻는 또 다른 옵션은 getScript () 메소드를 사용하는 것입니다. 이것은 단순히 위 아약스 메소드의 래퍼입니다.

 

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

 

 

 

이를 통해이 방법을 사용하여 작성중인 코드의 양을 줄일 수 있습니다.

 

$.getScript( "http://test_script.js" )
  .done(function( script, textStatus ) {
    alert('Successfully loaded script');
  })
  .fail(function( jqxhr, settings, exception ) {
    alert('Failed to load script');
});

 

 

 

getScript ()를 사용할 때의 문제점은 스크립트가 항상 JavaScript 파일의 끝에 타임 스탬프 쿼리 문자열을 추가하므로 스크립트를 캐시하지 않는다는 것입니다. ajax () 메소드를 사용하면 스크립트를 캐시할지 여부를 선택할 수 있으므로 변경되지 않는 스크립트를로드 할 때 이 메소드를 사용하는 것이 좋습니다.