Загрузка jQuery После загрузки страницы - не в области? - PullRequest
0 голосов
/ 24 марта 2020

Я пытаюсь ускорить отзывчивость моих веб-страниц на основе микроконтроллера, загружая JavaScript после полной загрузки страницы. Я нашел этот метод в многих местах :

if (window.addEventListener)
    window.addEventListener("load", doAfterPageLoad, false);
else if (window.attachEvent)
    window.attachEvent("onload", doAfterPageLoad);
else window.onload = doAfterPageLoad;

События, безусловно, происходят так, как я этого хотел, но ресурсы, в частности jQuery, после загрузки не кажутся доступными , Это пример сценария, демонстрирующий то, с чем я сталкиваюсь:

<script type="text/javascript">
    function loadPageData() {
        console.log("DEBUG: Entering: " + arguments.callee.name);
        // Do stuff requiring jQuery here
        console.log("DEBUG: Exiting: " + arguments.callee.name);
    }

    function loadJS() {
        console.log("DEBUG: Entering: " + arguments.callee.name);
        var jq = document.createElement("script");
        jq.type = "text/javascript";
        jq.crossOrigin = "anonymous";
        jq.integrity = "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=";
        jq.src = "https://code.jquery.com/jquery-3.4.1.min.js";
        document.body.appendChild(jq);
        var pop = document.createElement("script");
        pop.type = "text/javascript";
        pop.crossOrigin = "anonymous";
        pop.integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1";
        pop.src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js";
        document.body.appendChild(pop);
        var bs = document.createElement("script");
        bs.type = "text/javascript";
        bs.crossOrigin = "anonymous";
        bs.integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM";
        bs.src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js";
        document.body.appendChild(bs);
        console.log("DEBUG: Leaving: " + arguments.callee.name);
    }

    function doAfterPageLoad() { // Load the page's JS elements
        console.log("DEBUG: Entering: " + arguments.callee.name);
        loadJS();   // Load external JS
        if(window.jQuery) {
            loadPageData(); // Load once on page load
        } else {
            console.log("DEBUG: jQuery not loaded.");
        }
        console.log("DEBUG: Leaving: " + arguments.callee.name);
    }

    // Attach the event after the page loads
    window.addEventListener("load", doAfterPageLoad, false);
</script>

Из этого я получаю следующий консольный журнал:

DEBUG: Entering: doAfterPageLoad
DEBUG: Entering: loadJS
DEBUG: Leaving: loadJS
DEBUG: jQuery not loaded.
DEBUG: Leaving: doAfterPageLoad
DEBUG: Entering: loadJS
DEBUG: Leaving: loadJS
DEBUG: jQuery not loaded.
DEBUG: Leaving: doAfterPageLoad

Итак, jQuery недоступен для остальных сценарий, в частности loadPageData().

Я подозреваю, что это какая-то проблема с областью видимости, но до сих пор я не смог взломать этот конкретный орех.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...