Не подгружается CSS. Почему?

Question

[Leonid Fedotov]

На странице с помощью JS в head страницы добавляются скрипты и стили. Добавление тега тривиальное - создается тег, к нему добавляются атрибуты, тег помещается в head и браузера загружает скрипт/стили и тут же всё это применяет. После загрузки каждого скрипта/стиля, загружается следующий и так далее. Это работает. На desktop-браузерах а-ля Chrome, Firefox, IE и на мобильных платформах (проверялось на Safari/Chrome iOS 8). Страница полностью заточена под разные виды устройств с разными размерами страницы, а так же предполагается её совместимость со всеми браузерами с поддержкой HTML5. Но, когда пришло время проверять работоспособность на старых устройствах начались проблемы. На iOS5.1 Safari и Chrome отказывают в работе скрипта. В логах, оказалось что браузеры останавливаются при попытке загрузить CSS. Я так понимаю какая-то проблема в добавлении нового атрибута в head? Или не срабатывает событие onreadystate? Скрипты погружаются абсолютно нормально этим же способом.

Answer 1

[Владимир]

Для начала попробуйте добавить скрипты и стили не посредством JS, а вручную - отработается ли в iOS?

Comments

[Leonid Fedotov]

Да, работает. Со стилями всё нормально - CSS3 валидацию проходят.

[Leonid Fedotov]

Что интересно, если изменить порядок загрузки, перемешать стили между собой, проблема всё-равно остаётся.

[Владимир]

Я так понял, что в секции head прежде всего выполняется скрипт, подгружающий нужные css? Вероятно в "неработающих" браузерах DOM строится, когда дополнительные стили еще не подгрузились, а после подгрузки они не срабатывают. Что показывает исходный код страницы в этом случае? Почему бы вам не применить стили к нужным элементами средствами JS (jQuery) по событию ready?

[Leonid Fedotov]

djQuery: основной лаунчер и все дальнейшие события отрабатываются когда страница полностью загрузилась (в ином случае просто бы не имело бы смысла пользоваться JS-скриптом в виде лаунчера). А вот как выглядит исходный код - не знаю. Несколько проблематично вытащить его из мобильных браузеров :)

[Leonid Fedotov]

djQuery: код, который всё это добавляет:

if(window.libs[index].type == 'script'){
window.libs[index].object = document.createElement("script");
window.libs[index].object.src = window.libs[index].url;
window.libs[index].object.type="text/javascript";
}else if(window.libs[index].type == 'css'){
window.libs[index].object = document.createElement("link");
window.libs[index].object.id = 'zuruHeadCSS_'+index;
window.libs[index].object.href = window.libs[index].url;
window.libs[index].object.type = "text/css";
window.libs[index].object.rel="stylesheet";
window.libs[index].object.media="all";
}
document.getElementsByTagName('head')[0].appendChild(window.libs[index].object);
window.libs[index].object.onload = function(){
window.libs[index].loaded = true;
}
},2);
}