Вопрос по css – Как определить, был ли загружен CSS?

19

Как я могу утверждать, что CSS для страницы успешно загрузил и применил свои стили в Watin 2.1?

@yAnTar - я не уверен, как это поможет. Я не хочу, чтобы на моих страницах была куча кода ajax, который используется только для тестирования. Erik Funkenbusch
Попробуй такstackoverflow.com/questions/2571164/… yAnTar

Ваш Ответ

4   ответа
0

Поскольку совместимость браузера может изменяться, а новые будущие стандарты браузера могут изменяться, я бы порекомендовал комбинацию прослушивателя загрузки и добавления CSS в таблицу стилей, чтобы вы могли прослушивать изменения z-индекса HTML-элементов, если вы используете один таблица стилей. В противном случае используйте функцию ниже с новым метатегом для каждого стиля.

Добавьте следующее в загружаемый файл CSS:

#*(insert a unique id for he current link tag)* {
    z-index: 0
}

Добавьте следующее в ваш скрипт:

function whencsslinkloads(csslink, whenload ){
    var intervalID = setInterval(
        function(){
            if (getComputedStyle(csslink).zIndex !== '0') return;
            clearInterval(intervalID);
            csslink.onload = null;
            whenload();
        },
        125 // check for if it has loaded 8 times a second
    );
    csslink.onload = function(){
        clearInterval(intervalID);
        csslink.onload = null;
        whenload();
    }
}

Example

index.html:

<!doctype html>
<html>
    <head>
        <link rel=stylesheet id="EpicStyleID" href="the_style.css" />
        <script async href="script.js"></script>
    </head>
    <body>
        CSS Loaded: <span id=result>no</span>
    </body>
</html>

script.js:

function whencsslinkloads(csslink, whenload ){
    var intervalID = setInterval(
        function(){
            if (getComputedStyle(csslink).zIndex !== '0') return;
            clearInterval(intervalID);
            csslink.onload = null;
            whenload();
        },
        125 // check for if it has loaded 8 times a second
    );
    csslink.onload = function(){
        clearInterval(intervalID);
        csslink.onload = null;
        whenload();
    }
}
/*************************************/
whencsslinkloads(
    document.getElementById('EpicStyleID'),
    function(){
        document.getElementById('result').innerHTML = '<font color=green></font>'
    }
)

the_style.css

#EpicStyleID {
    z-index: 0
}

PLEASE do not заставить ваш скрипт загружаться синхронно (безasync атрибут) просто для того, чтобы вы могли захватить событие загрузки ссылки. Есть лучшие способы, такие как метод выше.

25

После некоторого исследования и написания моего ответа, я наткнулся наэта ссылка это объясняет все, что вам нужно знать о CSS, когда он загружается и как вы можете проверить его.

Приведенная ссылка объясняет это настолько хорошо, что я добавляю некоторые цитаты из нее для дальнейшего использования.
If you're curious, my answer was going to be #2 and a variation of #4.

When is a stylesheet really loaded?

...

После этого давайте посмотрим, что у нас здесь.

// my callback function 
// which relies on CSS being loaded function
CSSDone() {
    alert('zOMG, CSS is done');
};

// load me some stylesheet 
var url = "http://tools.w3clubs.com/pagr/1.sleep-1.css",
    head = document.getElementsByTagName('head')[0],
    link = document.createElement('link');

link.type = "text/css"; 
link.rel = "stylesheet";
link.href = url;

// MAGIC 
// call CSSDone() when CSS arrives
head.appendChild(link);

Варианты магической части, от простого к смешному

  1. listen to link.onload
  2. listen to link.addEventListener('load')
  3. listen to link.onreadystatechange
  4. setTimeout and check for changes in document.styleSheets
  5. setTimeout and check for changes in the styling of a specific element you create but style with the new CSS

Пятый вариант слишком сумасшедший и предполагает, что у вас есть контроль над содержимым CSS, так что забудьте об этом. Кроме того, он проверяет текущие стили в тайм-ауте, что означает, что он очистит очередь перекомпоновки и может быть потенциально медленным. Чем медленнее прибыть CSS, тем больше будет повторений. Так что, действительно, забудь об этом.

Так как насчет реализации магии?

// MAGIC 

// #1   
link.onload = function () {
    CSSDone('onload listener');
};   

// #2   
if (link.addEventListener) {
    link.addEventListener('load', function() {
        CSSDone("DOM's load event");
    }, false);   
};   

// #3   
link.onreadystatechange = function() {
    var state = link.readyState;
    if (state === 'loaded' || state === 'complete') {
        link.onreadystatechange = null;
        CSSDone("onreadystatechange");
    }   
};

// #4   
var cssnum = document.styleSheets.length;
var ti = setInterval(function() {
    if (document.styleSheets.length > cssnum) {
        // needs more work when you load a bunch of CSS files quickly
        // e.g. loop from cssnum to the new length, looking
        // for the document.styleSheets[n].href === url
        // ...

        // FF changes the length prematurely :(
        CSSDone('listening to styleSheets.length change');
        clearInterval(ti);
    }   
}, 10);

// MAGIC ends
Проверьте мой ответ, который относится к важному последующему обновлению к статье @ShowScripter ссылки на.
7

В статье @ShadowScripter появилось обновление статьи. Новый метод предположительно работает во всех браузерах,including FF.

var style = document.createElement('style');
style.textContent = '@import "' + url + '"';

var fi = setInterval(function() {
  try {
    style.sheet.cssRules; // <--- MAGIC: only populated when file is loaded
    CSSDone('listening to @import-ed cssRules');
    clearInterval(fi);
  } catch (e){}
}, 10);  

document.getElementsByTagName('head')[0].appendChild(style);
2

После загрузки страницы вы можете проверить стиль некоторых ваших элементов примерно так:

var style = browser.Div(Find.ByClass("class")).Style;
Assert.That(Style.Display, Is.StringContaining("none"));
Assert.That(Style.FontSize, Is.EqualTo("10px"));

И так далее...

Вы можете проверить свойства элемента и т. Д. ... тест видимости может быть сделан только глазами. если у вас есть решение для этого, я буду рад узнать ответ :)
Хорошо, но это на самом деле только часть проблемы. Это только подтверждает, что стиль применяется, а не то, что все стили загружены корректно. Например, как я могу убедиться, что заданное фоновое изображение загружено как часть стиля? Проверка стиля скажет, что у стиля есть фоновое изображение, но как я могу убедиться, что это изображение загружено и отображается? Erik Funkenbusch

Похожие вопросы