일반 JavaScript를 사용하여 jQuery 라이브러리를 동적으로로드합니다-JS 튜토리얼-php.cn

일반 JavaScript를 사용하여 jQuery 라이브러리를 동적으로로드합니다

Lisa Kudrow

풀어 주다： 2025-03-07 00:42:08

원래의

217명이 탐색했습니다.

Dynamically Load jQuery Library Using Plain JavaScript Pure JavaScript를 사용하여 jQuery 라이브러리를 동적으로로드하는 방법에 대한 자세한 설명. 로드가 비동기 적으로 수행되므로 콜백 버전이 기사에 포함되어있어 스크립트를 삽입 한 후 jQuery를 사용할 수있는시기를 이해할 수 있습니다! 스크립트를 보안 페이지에 삽입하는 것에 대한 기사를 게시하여 더 많은 옵션을 찾을 수 있습니다. 순수한 자바 스크립트가있는 jQuery 라이브러리로드

콜백 함수 버전을 가져옵니다. JavaScript에서 jQuery를 동적으로로드하는 것은 필요할 때 jQuery 라이브러리 만로드하는 기술입니다. 이는 초기로드 시간을 줄임으로써 웹 페이지 성능을 크게 향상시킬 수 있습니다. 페이지가로드되면 HTML 파일에 링크 된 모든 스크립트도로드됩니다. jQuery를 즉시 사용할 필요가 없다면 동적로드를하면 대역폭을 절약하고 페이지로드 속도를 높이십시오. 이 기술은 전체 웹 사이트가 아닌 특정 기능에만 jQuery를 사용하는 웹 사이트에 특히 유용합니다.

jQuery의 동적 하중은 어떻게 작동합니까?

jQuery의 동적 하중에는 JavaScript를 사용하여 필요할 때만 jQuery 라이브러리를로드하는 것이 포함됩니다. 이는 새 스크립트 요소를 작성하고 소스를 jQuery 라이브러리 URL로 설정 한 다음이 스크립트 요소를 HTML 문서에 추가하여 수행됩니다. 스크립트가 첨부되면 브라우저는 jQuery 라이브러리를 가져 와서 실행합니다. 이 프로세스는 일반적으로 jQuery가 필요할 때 호출 할 수있는 함수 내에서 수행됩니다.

// 使用纯JavaScript加载jQuery库
(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();

로그인 후 복사

jQuery를 동적으로로드 직후 jQuery 함수를 사용할 수 있습니까?

아니요, jQuery를 동적으로로드 한 직후 jQuery 함수를 사용할 수 없습니다. 브라우저가 스크립트를 비동기로로드하기 때문입니다. 이는 나머지 코드가 실행되는 동안 스크립트가 백그라운드에서 계속로드되는 것을 의미합니다. 따라서 사용을 시작하기 전에 jQuery가 완전히로드되었는지 확인해야합니다. jQuery가로드 된 후 실행 된 콜백 함수를 사용하여 수행 할 수 있습니다.

jQuery를 사용하기 전에 jQuery가로드되는지 확인하는 방법은 무엇입니까?

(function () {

    function loadScript(url, callback) {

        var script = document.createElement("script")
        script.type = "text/javascript";

        if (script.readyState) { //IE
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //其他浏览器
            script.onload = function () {
                callback();
            };
        }

        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

    loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {

         //jQuery 加载完成
         console.log('jquery loaded');

    });


})();

로그인 후 복사

콜백 함수를 사용하여 jQuery를 사용하기 전에 jQuery가로드되도록 할 수 있습니다. 콜백 함수는 다른 함수에 대한 인수로 전달되고 다른 함수가 실행 된 후 실행되는 함수입니다. jQuery의 동적 로딩의 경우 콜백 함수를 jQuery를로드하는 함수로 전달할 수 있습니다. 이 콜백 함수에는 모든 jQuery 코드가 포함되어 있으며 jQuery가 완전히로드 된 후에 실행됩니다.

동적으로 jQuery를로드하면 어떤 이점이 있습니까?

jQuery의 동적 하중에는 많은 이점이 있습니다. 첫째, 초기로드 시간을 줄임으로써 웹 사이트의 성능을 크게 향상시킬 수 있습니다. jQuery 라이브러리는 나머지 HTML 문서가 아니라 필요할 때만로드되기 때문입니다. 둘째, 특히 인터넷 연결이 느린 사용자에게는 대역폭을 절약 할 수 있습니다. 마지막으로, 웹 사이트의 일부에 대해서만 jQuery를로드 할 수 있으므로 코드를보다 모듈화하고 유지 관리하기 쉽게 만들 수 있습니다.