Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2018, 18:14
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Асинхронная загрузка CSS
Нужно сделать асинхронную загрузку CSS с помощью jQuery.
Делаю так:
<script>
$(document).ready(function() {
	    $("head").append("<link href='/wp-content/themes/theme1971/css/normalize.css' rel='stylesheet' >");
        $("head").append("<link href='/wp-content/themes/theme1971/css/mobile.css' rel='stylesheet' >");
		 $("head").append("<link href='wp-content/themes/theme1971/style.css' rel='stylesheet' >");
       	 $("head").append("<link href='/wp-content/themes/theme1971/css/mobile1.css' rel='stylesheet' >");
        $("head").append("<link href='/wp-content/themes/theme1971/css/prettyPhoto.css' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/grid.css' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=BenchNine:400,700,300' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=BenchNine:400,700,300' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/slider.css' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/timer.css' rel='stylesheet' >");
	});

	</script>


Но как для некоторых стилей прописать media запросы CSS? Делаю так, но не работает.

<script>
$(document).ready(function() {
	    $("head").append("<link href='/wp-content/themes/theme1971/css/normalize.css' rel='stylesheet' >");
        $("head").append("<link href='/wp-content/themes/theme1971/css/mobile.css' rel='stylesheet' @media screen and (max-width: 767px) >");
		$("head").append("<link href='wp-content/themes/theme1971/style.css' rel='stylesheet'  @media screen and (min-width: 1366px) >");
        $("head").append("<link href='/wp-content/themes/theme1971/css/mobile1.css' rel='stylesheet'  media=screen and (min-width: 768px) and (max-width: 1365px)>");
        $("head").append("<link href='/wp-content/themes/theme1971/css/prettyPhoto.css' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/grid.css' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=BenchNine:400,700,300' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=BenchNine:400,700,300' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/slider.css' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/timer.css' rel='stylesheet' >");
	});

	</script>
Ответить с цитированием
  #2 (permalink)  
Старый 25.02.2018, 19:13
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

попробуйте так:
$("head").append("<link href='/wp-content/themes/theme1971/css/mobile.css' rel='stylesheet' media='handheld,only screen and (max-device-width:767px)' >");
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическая синхронная загрузка CSS GayCoder Общие вопросы Javascript 1 16.02.2016 21:25
yepnope - асинхронная загрузка CSS Sacred13 Events/DOM/Window 0 28.04.2014 22:04
JS + CSS Под загрузка фонового изображения XboxPro Элементы интерфейса 0 14.11.2012 11:16
Асинхронная загрузка javascript JIEXA AJAX и COMET 17 18.11.2011 10:42
AJAX загрузка CSS в IE addam jQuery 0 26.07.2011 08:09