IStranger"Золотые" правила оптимизации фронтэнда часто рекомендуют подключать все JS скрипты в конце страницы.
Однако обычно нам строго необходимо подлючать <script src="//jquery.js"> в <head> страницы, и мы не можем его оттуда удалить, поскольку контент страницы может содержать onReady-обработчики, например $(function(){ ... }). Такие обработчики обычно вставляются автоматически сторонними виджетами, CMS, фреймворками.
Этот короткий скрипт позволяет переместить подключение jquery.js из <head> в конец <body> без изменения имеющихся onReady-обработчиков на странице.
Код:
<head>
<script>
// Fallback code for the jQuery inline scripts on pages:
if (window.jQuery === undefined) {
window.jQueryReadyHandlers = [];
window.$ = window.jQuery = function (callback) {
window.jQueryReadyHandlers.push(callback);
return window.$;
};
window.$.ready = window.$;
}
</script>
<!-- ...some head items -->
</head>
<body>
<!-- ...some page content -->
<script>
// some onReady-handlers
$(function(){
console.log('First callback');
});
jQuery(document).ready(function(){
console.log('Second callback');
});
</script>
<!-- ...some page content -->
<script src="//js/jquery.min.js"></script>
<script>
jQuery(window).load(function(){
if(window.jQueryReadyHandlers) {
$.each(window.jQueryReadyHandlers, function(index,func){
$(func);
});
}
});
</script>
</body>
Чтобы увидеть комментарии, нужно быть участником сообщества
Регистрация