Загрузка 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.