откладывание javascript с проблемами jQuery и версией

Question

У меня возникли проблемы с откладыванием javascript. Из Google's docs о defering JS, я нашел следующий код, отредактированный моим потребностям:

<script type='text/javascript'> 
function downloadJSAtOnload() { 
    var element = document.createElement("script"); 
    element.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"; 
    document.body.appendChild(element); 
    var element2 = document.createElement("script"); 
    element2.src = "jquery.validate.js"; 
    document.body.appendChild(element2); 
    var element3 = document.createElement("script"); 
    element3.src = "fancybox/jquery.fancybox.pack.2.1.4.js"; 
    document.body.appendChild(element3); 
} 

if (window.addEventListener) 
    window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
    window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload; 
</script> 

Этот код добавляет 3 .js файлов на странице, и они отображаются в инспекторе. Теперь проблема в том, что у меня есть больше коды на моей странице, с помощью JQuery & аналитики Google

<script type='text/javascript'> 
$(document).ready(function(){ 
    //some code 
}); 
var _gaq = _gaq || []; 
_gaq.push(['_setAccount', '*********']); 
_gaq.push(['_trackPageview']); 
(function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 
</script> 

Теперь я поставил весь мой код в раздел //some code, поэтому код для инициализации FancyBox и добавления обработчиков событий. Теперь проблема, которую я получаю, это когда освежающе, иногда я получаю Uncaught ReferenceError: jQuery is not defined. Я могу только предположить, что это потому, что файлы загружаются перед файлом jQuery. Как мне это решить?

Кроме того, код внутри main.js (файл .js со всем другим кодом js, требуемым на странице) все еще должен быть в $(document).ready(function(){...}); или нет? Я использовал для размещения большого количества javascript между моим кодом в php, поэтому его не нужно было отправлять на страницу, если это не нужно, но я предполагаю, что использование внешнего .js-файла может принести пользу из-за того, что оно кэшируется.

И заметка на полях: Apparantly использования bar.js?v=1.0 для версий плох (в соответствии с Эль-Goog, потому что тогда некоторые прокси-сервер не кэшировать его), так что лучший способ, чтобы всегда изменить имя файла, например, так: bar.1.0.js?

Answer 1

JQuery не загружается при вызове «$ (документ) .ready (функция() {», потому что он еще не включен в страницу, но загружается после загрузки страницы.

Это может быть решена выполняя весь код после того, как файл JQuery выполняется загрузка:

<script type='text/javascript'> 
var element = document.createElement("script"); 
function downloadJSAtOnload() { 
    element.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"; 
    document.body.appendChild(element); 
    var element2 = document.createElement("script"); 
    element2.src = "jquery.validate.js"; 
    document.body.appendChild(element2); 
    var element3 = document.createElement("script"); 
    element3.src = "fancybox/jquery.fancybox.pack.2.1.4.js"; 
    document.body.appendChild(element3); 
} 

if (window.addEventListener) 
    window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
    window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload; 
</script> 

<script type="text/javascript"> 
// Quick and dirty implementation, you should check for all the included files to be done loading, and create some sort of object that triggers an event that is called when alle the files are loaded 
element.onload = function { 
    $(document).ready(function() { ... }); 
} 
</script> 

[Изменить]: Jquery зависит файлы загружены до JQuery: Вы должны применить тот же метод и создать объекты сценария других файлов после завершения процесса jQuery запускает событие onload. Вам действительно не нужно больше использовать $ (document) .ready(), потому что файлы включены в onload, который всегда после domready ,

<script type='text/javascript'> 
function downloadJSAtOnload() { 
    var element = document.createElement("script"); 
    element.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"; 
    document.body.appendChild(element); 

    element.onload = function() { 
     /jQuery is ready, now load the files that build on the jQuery framework 
     var element2 = document.createElement("script"); 
     element2.src = "jquery.validate.js"; 
     document.body.appendChild(element2); 
     var element3 = document.createElement("script"); 
     element3.src = "fancybox/jquery.fancybox.pack.2.1.4.js"; 
     document.body.appendChild(element3); 
    } 
} 

if (window.addEventListener) 
    window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
    window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload; 
</script>