Я пытаюсь ускорить отзывчивость моих веб-страниц на основе микроконтроллера, загружая 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()
.
Я подозреваю, что это какая-то проблема с областью видимости, но до сих пор я не смог взломать этот конкретный орех.