@Extramezz

Как правильно динамически подключать скрипты?

Банальный пример:

<head>
<script> addResourse("jQuery.js"); </script>
</head>
<body>
....
<script>console.log(jQuery);</script>
</body>


function addResourse(path){
  var compile  = document.createElement("script"); 
  compile.type = "text/javascript"; compile.src = path; compile.async = false;
  document.head.appendChild(compile);
}


Код внизу body выдает ошибку, потому что браузер ставит jQuery "на загрузку" и идет по странице дальше, будто бы там асинхронность включена. То есть, jQuery точно загружается, но не сразу. Почему? Как поправить?
  • Вопрос задан
  • 382 просмотра
Пригласить эксперта
Ответы на вопрос 3
madmages
@madmages
Человек прямоходящий
насколько я разумею, async срабатывает, хоть там и fslse. он срабатывает просто изза того что там сам атрибут есть. пробуй не писать compile.async = false;. по идее должно сработать.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
function loadjscssfile(filename, filetype, callback){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
		fileref.setAttribute("async",true)
        fileref.setAttribute("src", filename)

	if (fileref.readyState) { //IE
            fileref.onreadystatechange = function () {
                if (fileref.readyState == "loaded" || fileref.readyState == "complete") {
                    fileref.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others
            fileref.onload = function () {
                callback();
            };
        }
		
	
	}
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(fileref);
}

(function (){
//Dynamically load jquery
if (typeof jQuery == 'undefined') {  
	loadjscssfile('//code.jquery.com/jquery.min.js','js',function () {
		main();
	});
} else main();
})();

function main(){
$(document).ready(function(){
//main code.....
});
};
Ответ написан
Комментировать
@Alex_mc
Веселый препод :)
Сам уже год капаю всякую инфу, если проект самосборка, то лучше загрузчик скриптов.
Для проектов CMS самый лучший способ который нашел, подключать главные скрипты через атрибут defer (он лучше чем async позволяет загрузить все скрипты а потом выполнить). Остальные скрипты которые независимы от jQuery подгружаю async.

Мое решение схоже с xmoonlight только с таймером проверки.
Коды обработки если они выводятся в отдельный скрипт, отлично, ставлю в конце и тоже defer, если нет то использую в конце дока такую функцию
function jQueryWaiting() {
    if (typeof jQuery === "undefined") {
         setTimeout(jQueryWaiting,100);
        return;
    }
 
    $(document).ready(function(){
        console.log( "ready!" );
    });
}
jQueryWaiting();

Так же был вариант с лоадером, типо в самой загрузке скрипта сделать onload. варианта лучше пока не нашел.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы