Загрузка JavaScript-библиотек с Google Loader

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

К этой же мысли пришли и в Google, создав Google Loader API. Работает он следующим образом: на сайт подгружается небольшой JavaScript, который может загружать  jQuery, jQuery UI, Google Maps, SFWObject, Prototype и еще несколько известных библиотек прямо с серверов Google.

Это дает целый ряд преимуществ:

  • обходится лимит на ограничение количества запросов к одному хосту, скрипты (а так же CSS-стили для них) загружаются параллельно с другими элементами сайта, что ускоряет загрузку у пользователей с быстрыми каналами;
  • проще обновляться до новой версии библиотеки (или откатываться к старой в случае необходимости): достаточно указать номер нужной версии при вызове функции загрузки, не надо обновлять файлы на своем сервере;
  • и самое главное: если пользователь до этого побывал на каком-то сайте, который использует Google Loader и эту же библиотеку, то она уже будет у него в кеше, т.е. экономится траффик как сервера, так и пользователя.

Конечно, некоторые недостатки у этого решения есть, но они незначительны:

  • для каждого сайта нужно получать уникальный API-ключ, для чего нужен аккаунт в Google;
  • делается лишний запрос к DNS-серверу для определения адреса www.google.com (впрочем, у многих пользователей к моменту прихода на сайт он и так будет в кеше);
  • в случае недоступности Google нарушится работоспособность и вашего сайта, но вероятность падения Google весьма мала, да и про обеспечение корректной работы сайта без JavaScript забывать не следует.

Как же использовать Google Loader API? Достаточно просто: подключаем скрипт-загрузчик:

<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>

И загружаем нужные библиотеки с помощью функции google.load, в первом параметре которой пишем название библиотеки, во втором — версию:

<script type="text/javascript">

  google.load("jquery", "1.4.4");

  google.load("jqueryui", "1.7.1");

  google.load("maps", "3");

</script>

Так же есть возможность вызова функции на момент окончания загрузки. Для этого в третьем параметре google.load нужно передать имя или ссылку на нужную функцию в опции callback :

google.load("maps", "2", {"callback" : mapsLoaded});

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


0
Цитировать