Динамическое подключение jQuery

С целью дальнейшего развития моего сервиса-скрипта Share42.com я искал способ динамического подключения фреймворка jQuery непосредственно в коде JavaScript.

Нашел красивое решение, которое выполняет одновременно 2 задачи:

  1. Проверяет, подключен ли уже на странице jQuery.
  2. Если не подключен, то подключает его с Гугла.

Таким образом, предотвращается двойная загрузка jQuery на странице, и, соответственно, экономится трафик, если jQuery на сайте уже подключен.

Код скрипта, который реализует вышесказанное, выглядит следующим образом:

var jQ = false;
function initJQ() {
	if (typeof(jQuery) == 'undefined') {
		if (!jQ) {
			jQ = true;
			document.write('<scr' + 'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></scr' + 'ipt>');
		}
		setTimeout('initJQ()', 50);
	} else {
		(function($) {
		$(function() {

			// здесь пишем jQuery код

		})
		})(jQuery)
	}
}
initJQ();

Благодаря этому скрипту, у меня теперь появилась возможность прикрутить к Share42.com функцию сокращения ссылки, которую просят пользователи, а также можно реализовать и вариант с плавающей панелью.

* * *

Профессиональное рекламное агентство полного цикла Промолидер предоставляет весь спектр рекламных услуг, связанных как с изготовлением рекламной продукции, так и непосредственной рекламой товаров и услуг.

Комментарии (58)
  1. 1
    Evgeny Zhlobo

    А для чего используется такое разделение:

    <scr' + 'ipt
  2. 5
    aktuba
    @

    Если не ошибаюсь, этот код с одного из постов хабра. Я тоже брал оттуда, но потом переделал под себя, чтобы можно было загружать не только js, но и css… Кстати, на themeforest.net видел отличную технику, когда js и css (например, плагины к jquery) подгружаются только тогда, когда они нужны.

  3. 7
    marazmiki

    Может, лучше так?

    var getJQuery = function(){
     if (typeof(jQuery) == 'undefined') {
     var s = document.createElement('SCRIPT');
     s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
     s.type = 'text/javascript';
     document.getElementsByTagName('HEAD')[0].appendChild(s);
     }
     return jQuery;
    }

    Потом в теле скрипта написать myJQuery = getJQuery(); и быть уверенным, что в переменной myJQuery (которую, кстати, можно и $ обозвать при желании) уже находится jQuery?

  4. 10

    А вот не станет ли этот скрипт грузить jQuery повторно, если он уже есть в кэше браузера? По-моему, совершенно ненужный велосипед. Если ты изначально ставишь в link ссылку на гугловское хранилище фреймворка, оно лучше отработать должно. Хотя я не специалист, но размышления меня приводят к такому выводу.

    • 11

      А вот не станет ли этот скрипт грузить jQuery повторно, если он уже есть в кэше браузера?

      Не станет.

      По-моему, совершенно ненужный велосипед.

      Для тебя может и велосипед, а для меня — решение конкретной задачи.

      Если ты изначально ставишь в link ссылку на гугловское хранилище фреймворка, оно лучше отработать должно.

      Суть в том, что на чужом сайте подключается мой скрипт социальных сервисов, и я заранее не знаю, подключает ли jQuery владелец сайта. А вышеобозначенным скриптом как раз и проверю.

    • 13

      А вот не станет ли этот скрипт грузить jQuery повторно

      В нормальном браузере не станет, вроде. Браузер проверяет сначала саму ссылку, если она в кэше, затем время изменения файла и прочее, если все идентично кэшу, то файл по ссылке не грузится. Думаю сейчас уже все браузеры так работают. А вот если вреймворк на сайте уже подключен, причем не с гугл-хранилища, без такой проверки библиотека будет грузиться повторно.

      С другой стороны, если этот код вызван до того, как подключается jquery локально, то в любом случае библиотека будет загружена 2 раза, или я что-то не так понял?

      А еще, Дим зачем нужно такое пугающее зацикливание на каждые 50 миллисекунд: setTimeout(‘initJQ()’, 50);? Оно ведь, ко всему прочему, вроде, еще и бесконечное — опасный код какой-то (так он чего доброго браузер повесит), я его не тестировал, но выглядит опасно :)

      Мне кажется, было бы логично, если это вообще возможно, проверять наличие библиотеки jquery сразу после того как загружена head часть документа (ведь, библиотека вызывается почти всегда именно там). Если jquery не обнаружено, то подключать её. Но опять же, кажется, могут возникнуть глюки в разных браузерах.

      • 14
        anStream

        если этот код вызван до того, как подключается jquery локально, то в любом случае библиотека будет загружена 2 раза, или я что-то не так понял?

        Верно, если этот код будет вызван ранее чужого и чужой не шарит подобной проверки :)

        Дим зачем нужно такое пугающее зацикливание на каждые 50 миллисекунд: setTimeout(’initJQ()’, 50);? Оно ведь, ко всему прочему, вроде, еще и бесконечное…

        Бесконечным оно действительно может быть, но не всегда, а только до момента загрузки и выполнения кода jQuery, но всётаки может — если нет доступа к хосту с сорсом или с неверным урлом к сорсу. Тем не менее, не должно вызвать особой нагрузки на браузер — простой if раз в 50мс — это несложно.

      • 16

        С другой стороны, если этот код вызван до того, как подключается jquery локально, то в любом случае библиотека будет загружена 2 раза, или я что-то не так понял?

        Да, скорее всего так и есть.

        А еще, Дим зачем нужно такое пугающее зацикливание на каждые 50 миллисекунд: setTimeout(’initJQ()’, 50);?

        Ты думаешь, я в этом разбираюсь? =) То, что нашел в Инете, то и вставил.

  5. 17

    Я вот если честно так и не понял, что хорошего в этом…

  6. 18

    Дима, а в твоем случае, просто вот так разве не будет работать:

    function initJQ(){
     if (typeof(jQuery) == 'undefined')
     document.write('<scr' + 'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></scr' + 'ipt>');
    }
    initJQ();
    // здесь пишем jQuery код, который будет работать!
    
  7. 22
    Гость

    Не используйте document.write — это может плохо кончится :)

    И чем же?

  8. 27

    А если у меня уже подключён MooTools, который так же использует доллар $ для получения объектов из DOM и тут твой скрипт поверх подгрузит jQuery?

  9. 30
    detroit

    Смело можно заносить ваш код — вы меня простите — на сайт govnokod.ru — кто нибудь догадался проверить как загрузка вашего кода играет на скорость сайта, задержка в 50 мс в добавок.
    Меня всегда удивляло как гадкий код берется с одного левого сайта — где умельцы в кавычках стряпают их мегатоннами и потом такие же умельцы распространяют их повсеместо, в добавок надо сказать этот код не будет работать если на сайте есть еще фреймворки — допустим prototype.js — весь джеквери отпадет — jQuery.noConflict() не учтен — еще надо сказать что оптимально использовать window.onload для асинхронной загрузки скрипта что в разы увеличит скорость — без таймаутов.

  10. 49
    detroit

    засовываете в отдельный js файл после него можно подключать иные фреймворки без страха что они не смогут все вместе работать и все.
    по вопросам как работает код пишите отвечу всем — там все просто

  11. 50

    Спасибо за статью. Давно хотел знать как правильно работать с квери

  12. 51
    @

    Dimox, немного в оффтоп (т.к. гостевой книги тут не нашел, куда ещё писать такой оффтоп незнаю) : твой блог на каком движке крутиться ? MaxSite ?

    • 52

      гостевой книги тут не нашел, куда ещё писать такой оффтоп незнаю

      Через форму обратной связи, вверху ссылка «Контакты».

      твой блог на каком движке крутиться ? MaxSite ?

      Если бы ты заглянул в код страницы, то понял бы, что WordPress =)

  13. 53
    @

    ммда, нехило я затупил … даже стыдно стало

  14. 54
    @
    <script>!window.jQuery && document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"><\/script>');</script>
  15. 55

    У вас такой удобных блог, и столько инфы. Почему я раньше его не встречал?

  16. 57
    merfo

    а что это за плгин на этом блоге для Подсветка кода? а то я себе искал нашол yntaxHighlighter Plus. Так там галимо то что когда хочеш скопировать код выделяеються и числа строк вместе с кодом…