Загрузка jQuery UI CSS из CDN Google

Question

Загрузка jQuery UI CSS из CDN Google

463

Я планирую использовать Google для загрузки библиотеки jQuery для UI и Core. Мой вопрос в том, разрешают ли мне загрузить CSS для него или я должен сам его разместить?

Также, если я использую Google для загрузки, как мне загрузить другие плагины? Могу ли я сжимать все плагины вместе или это отдельный файл?

coool 04 май 2009, в 15:37

Источник

Теги:

jquery

css

jquery-ui

cdn

6 ответов

59

jQuery теперь имеет доступ к CDN:

code.jquery.com/ui/ [версия]/themes/ [название темы]/jquery-ui.css

И чтобы сделать это немного легче, вот вам:

base: http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css
black-tie: http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css
blitzer: http://code.jquery.com/ui/1.9.1/themes/blitzer/jquery-ui.css
cupertino: http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css
dark-hive: http://code.jquery.com/ui/1.9.1/themes/dark-hive/jquery-ui.css
dot-luv: http://code.jquery.com/ui/1.9.1/themes/dot-luv/jquery-ui.css
баклажан: http://code.jquery.com/ui/1.9.1/themes/eggplant/jquery-ui.css
excite-bike: http://code.jquery.com/ui/1.9.1/themes/excite-bike/jquery-ui.css
flick: http://code.jquery.com/ui/1.9.1/themes/flick/jquery-ui.css
hot-sneaks: http://code.jquery.com/ui/1.9.1/themes/hot-sneaks/jquery-ui.css
человечество: http://code.jquery.com/ui/1.9.1/themes/humanity/jquery-ui.css
le-frog: http://code.jquery.com/ui/1.9.1/themes/le-frog/jquery-ui.css
mint-choc: http://code.jquery.com/ui/1.9.1/themes/mint-choc/jquery-ui.css
пасмурно: http://code.jquery.com/ui/1.9.1/themes/overcast/jquery-ui.css
перец-дробилка: http://code.jquery.com/ui/1.9.1/themes/pepper-grinder/jquery-ui.css
redmond: http://code.jquery.com/ui/1.9.1/themes/redmond/jquery-ui.css
гладкость: http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css
юг-стрит: http://code.jquery.com/ui/1.9.1/themes/south-street/jquery-ui.css
start: http://code.jquery.com/ui/1.9.1/themes/start/jquery-ui.css
sunny: http://code.jquery.com/ui/1.9.1/themes/sunny/jquery-ui.css
swanky-purse: http://code.jquery.com/ui/1.9.1/themes/swanky-purse/jquery-ui.css
trontastic: http://code.jquery.com/ui/1.9.1/themes/trontastic/jquery-ui.css
ui-darkness: http://code.jquery.com/ui/1.9.1/themes/ui-darkness/jquery-ui.css
ui-lightness: http://code.jquery.com/ui/1.9.1/themes/ui-lightness/jquery-ui.css
vader: http://code.jquery.com/ui/1.9.1/themes/vader/jquery-ui.css

Dustin Woodard 09 нояб. 2012, в 20:01

4

Он поддерживает https сейчас (по крайней мере, со времени этого поста)
Ivan Akcheurov 13 янв. 2014, в 09:02
0

Как вы можете использовать образы, связанные с этим CDN, отсутствуют локали, и я не хочу их скачивать. Есть ли способ использовать тот, который хранится в CDN?
Baptiste Pernet 27 авг. 2015, в 22:26
0

@BaptistePernet: CDN также предоставляет все связанные изображения, и, поскольку все операторы url относятся к расположению файла css , клиент автоматически получит изображения из CDN.
MestreLion 01 фев. 2016, в 03:18

Показать ещё 1 комментарий

30

Google размещает jQueryUI css по этой ссылке https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css

Если вы посмотрите на этот код напрямую, он импортирует css, используя @import который может быть медленным. Вы можете захотеть включить импорт в свои части, чтобы получить небольшое преимущество в производительности:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.theme.css

user1159653 11 март 2012, в 02:37

5

Вы можете использовать этот, если вы имеете в виду jQuery UI css:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

samdy1 25 май 2013, в 18:06

5

Я бы так подумал. Почему нет? Не будет большого количества CDN без предоставления CSS для поддержки файлов script

Эта ссылка предполагает, что они:

Мы считаем особенно увлекательным, что Темы jQuery UI CSS теперь размещен в CDN AJAX LN.

Scott Evernden 04 май 2009, в 15:42

0

Я попытался добавить загрузку с помощью оператора загрузки Google ... не будет загружать CSS .... проверил это.
coool 04 май 2009, в 14:50
6

Вот пример URL, который, кажется, работает: ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/…
Scott Evernden 04 май 2009, в 14:58

3

Как говорит Обама "Да, мы можем". Вот ссылка на него. developers.google.com/#jquery

Вам нужно использовать

Google

ajax.googleapis.com/ajax/libs/jqueryui/[VERSION NO]/jquery-ui.min.js
ajax.googleapis.com/ajax/libs/jqueryui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

jQuery CDN

code.jquery.com/ui/[VERSION NO]/jquery-ui.min.js
code.jquery.com/ui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

Microsoft

ajax.aspnetcdn.com/ajax/jquery.ui/[VERSION NO]/jquery-ui.min.js
ajax.aspnetcdn.com/ajax/jquery.ui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

Найти названия тем здесь http://jqueryui.com/themeroller/ в закладке галереи

.

Но я бы не рекомендовал ваш хостинг из cdn по следующим причинам.

Несмотря на то, что ваши шансы на попадание в Google хороши в случае с Google CDN по сравнению с другими, но он все еще ужасно низкий. (любой cdn не только Google).
Загрузка через cdn у вас будет 3 запроса один для jQuery.js, один для jQueryUI.js и один для вашего кода. Вы можете сжать его на своем локальном компьютере и загрузить его как один ресурс.

http://zoompf.com/blog/2010/01/should-you-use-javascript-library-cdns

aWebDeveloper 27 авг. 2014, в 10:36

0

Ссылка на статью с 2010 года. Большинство упомянутых им данных устарели. Сейчас уровень посещаемости намного выше, сейчас гораздо больше сайтов используют Google CDN, чем в 2010 году.
Trader 23 апр. 2015, в 12:00
0

Пожалуйста, предоставьте данные
aWebDeveloper 23 апр. 2015, в 12:10
0

Вот обновленная статистика: blog.cloudharmony.com/2015/02/… Большинство веб-сайтов, похоже, сейчас используют CDN. Больше данных: w3techs.com/technologies/details/cd-jquerycdn/all/all
Trader 23 апр. 2015, в 18:22

Показать ещё 1 комментарий

Ещё вопросы

Он поддерживает https сейчас (по крайней мере, со времени этого поста)
Как вы можете использовать образы, связанные с этим CDN, отсутствуют локали, и я не хочу их скачивать. Есть ли способ использовать тот, который хранится в CDN?
@BaptistePernet: CDN также предоставляет все связанные изображения, и, поскольку все операторы url относятся к расположению файла css , клиент автоматически получит изображения из CDN.
Я попытался добавить загрузку с помощью оператора загрузки Google ... не будет загружать CSS .... проверил это.
Вот пример URL, который, кажется, работает: ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/…
Ссылка на статью с 2010 года. Большинство упомянутых им данных устарели. Сейчас уровень посещаемости намного выше, сейчас гораздо больше сайтов используют Google CDN, чем в 2010 году.
Вот обновленная статистика: blog.cloudharmony.com/2015/02/… Большинство веб-сайтов, похоже, сейчас используют CDN. Больше данных: w3techs.com/technologies/details/cd-jquerycdn/all/all

cletus · Accepted Answer · 2009-05-04T16-20-00.000Z

536

Лучший ответ

API библиотек Google AJAX, который включает в себя jQuery UI (в настоящее время v1.10.3), также включает популярные темы в соответствии с jQuery UI blog:

API Ajax L библиотек (CDN)

Без сжатия: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js
Сжатый: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
Темы несжатые: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, и vader.
Темы сжаты: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness и vader.

cletus 04 май 2009, в 16:20

1

URL для 1.7.2 здесь: blog.jqueryui.com/2009/06/jquery-ui-172
Sam Hasler 02 дек. 2009, в 17:54
2

Обратите внимание, что эти CSS-сценарии в настоящее время не сжаты / свернуты, что означает, что вы могли бы предлагать версии уменьшенного размера (примерно на 26% в соответствии с плагином PageSpeed для Firefox от Google) из вашего собственного домена, что может быть быстрее для ваших пользователей, если ваше соединение приличное и у них еще нет файла, кэшированного локально.
Drew Noakes 30 янв. 2011, в 10:15
116

каждый раз, когда я хочу найти этот CDN, я набираю "jquery ui css google cdn", и этот пост - самый прямой путь к списку их всех .. Я просто хочу поблагодарить вас +1
mazlix 09 июнь 2011, в 04:36
1

@Drew: Или он может использовать Reducisaurus тоже. :)
Alix Axel 18 июль 2011, в 00:48
1

@Alix, спасибо за ссылку . Похоже, полезный сервис.
Drew Noakes 18 июль 2011, в 10:44
1

Вы также можете ВЫРЕЗАТЬ второстепенные номера версий из URL, чтобы всегда автоматически получать последние версии CSS / JS. Просто оставьте основной номер версии на месте. Пример: ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/…
miCRoSCoPiC_eaRthLinG 15 сен. 2011, в 04:38
0

@miCRoSCoPiC_eaRthLinG, на самом деле вы можете этого не делать, поскольку Google устанавливает очень короткое время кэширования для не полностью указанных версий библиотек. Прошло всего около часа, когда я последний раз проверял.
cdeszaq 05 окт. 2012, в 15:44
1

Вы также не захотите получить последнюю версию без проверки того, что она все еще работает. Например, базовая тема больше не включена в сборку CDN, и ссылка в ответе не работает. Вы также можете получить минимизированные версии из CDN Google. т.е. гладкость
Sean 26 март 2013, в 19:12
0

Чтобы получить минимизированный CSS из Google CDN, просто замените .css на .min.css
Marco Bettiolo 22 май 2013, в 09:57
1

Обратите внимание, что для включения вышеуказанных ссылок в ваш код не используйте протокол, например, <link rel="stylesheet" href="//ajax.googleapis.com/etc" /> и в этом случае он всегда будет содержать правильную версию в зависимости от по протоколу, запрошенному пользователем. То же самое относится и к JS-файлам jQuery и jQuery UI.
Mike 03 июль 2013, в 19:39
0

jQuery-ui теперь в версии 1.10.4. Просто обновите версию выше. Размещенные в Google библиотеки - Руководство разработчика - отличный ресурс для всех названий CDN, размещенных в Google. developers.google.com/speed/libraries/devguide#jquery-ui
wolfstevent 11 март 2014, в 12:01
0

Для предварительного просмотра каждой темы: jqueryui.com/themeroller
Chandrew 09 июнь 2014, в 17:39
0

Домен ajax.googleapis.com поддерживает HTTPS ... использование HTTPS не причиняет вреда в отличие от URL-адресов, относящихся к протоколу. Кроме того, здесь приведены инструкции по добавлению целостности подресурсов в теги сценариев -> blog.cdemi.io/using-subresource-integrity-sri-with-public-cdns
thelostspore 28 нояб. 2016, в 19:47

Показать ещё 11 комментариев