Как разрешить выполнение JavaScript только тогда, когда DOM и CSS готовы, но не изображение

Question

Как разрешить выполнение JavaScript только тогда, когда DOM и CSS готовы, но не изображение

Я хочу выполнить некоторый javascript только тогда, когда dom и css готовы, но меня не волнует изображение (я склонен лениво загружать изображение)

Я знаю, как определить состояние готовности домена, но как определить, готов ли CSS?

8

javascript domready

Источник

user508236 28 дек '12 в 03:19

7 ответов

Другие вопросы по тегам javascript domready

user1512306 28 дек '12 в 03:26 2012-12-28 03:26 · Answer 1 · 2012-12-28 03:26

Вы должны использовать document.ready событие. window.onLoad срабатывает, когда все изображения и другие полностью загружены.

Источник: window.onload vs $ (document).ready ()

1

Источник

user1512306 28 дек '12 в 03:26

user1936772 06 янв '13 в 17:01 2013-01-06 17:01 · Answer 2 · 2013-01-06 17:01

Вам нужно что-то вроде ниже. Эта функция выполняется, как только загружается DOM, но не вся страница. Существует большая разница между загрузкой страницы и загрузкой DOM.

$(document).ready(
                 function(){
                            alert('DOM is now loaded and can be manipulated .');
                           }
                 );

0

Источник

user1936772 06 янв '13 в 17:01

user63449 07 янв '13 в 22:00 2013-01-07 22:00 · Answer 3 · 2013-01-07 22:00

Это будет комбинация использования JS onload И загрузки всего вашего CSS сначала и сверху. Если вы загружаете весь свой CSS перед загрузкой любого скрипта, вы гарантированно загрузите весь свой CSS; совместите с JS под нагрузкой, и вы получите то, что ищете.

0

Источник

user63449 07 янв '13 в 22:00

user1123493 28 дек '12 в 03:30 2012-12-28 03:30 · Answer 4 · 2012-12-28 03:30

Яваскрипт не может сказать, загружены ли ваши файлы.css, если вы явно не загружаете свои файлы css, используя javascript. Вот как я бы сделал последнее:

function dynamicallyLoadCss(fileName,callBackFunc){
    var fileRef=document.createElement("link");
    fileRef.setAttribute("rel", "stylesheet");
    fileRef.setAttribute("type", "text/css");
    fileRef.setAttribute("href", filename);

    if(callBackFunc) {
        callBackFunc();
    }
}
//Call the function like so...
dynamicallyLoadCss("mystyles.css", function() {
    console.log("Our hamsters have finished loading your mystyles.css file.");
});

user1993097 10 фев '13 в 23:09 2013-02-10 23:09 · Answer 5 · 2013-02-10 23:09

Если вы не можете использовать технику $(document).ready, вы можете поместить свой код сценария прямо перед закрытием тега body.

<body>
html code....
....
<script>
var executeAfterDOMReady;
....
</script>
</body>

Что касается CSS, вы можете вызвать свой файл CSS через jQuery:

$("<link/>", { rel: "stylesheet", type: "text/css", href: "your.css"}).appendTo("head");

Или даже сделать вызов Ajax:

$.ajax({
    url:"your.css",
    dataType:"script",
    success:function(data){
        $("head").append("<style>" + data + "</style>");
        }
    });

user1226146 15 янв '13 в 09:23 2013-01-15 09:23 · Answer 6 · 2013-01-15 09:23

Загрузите весь CSS в заголовок страницы и перед любым JavaScript.

Также рекомендуется размещать JavaScript в нижней части страницы непосредственно перед тегом, чтобы вначале были полностью загружены все элементы.

$(document).ready(function(){
    // now do your actions
});

0

Источник

user1226146 15 янв '13 в 09:23

user1033426 04 фев '13 в 19:43 2013-02-04 19:43 · Answer 7 · 2013-02-04 19:43

Здесь люди публикуют множество примеров использования функции DQ Ready в jQuery, но им не удалось упомянуть или продемонстрировать, что для ее использования необходимо включить jQuery.

Вы можете использовать прямой JavaScript, чтобы выполнить то, что вам нужно, но техника варьируется в разных браузерах, и jQuery всегда отлично справляется с нормализацией этих различий по всем направлениям для вас - лично я человек jQuery. Наверное, всегда будет:)

В конце вашего HTML-документа <head> , включите библиотеку jQuery, а затем ваш код:)

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(function(){
        console.log("DOM is Ready! Images haven't finished loading yet!");
    });
</script>

Использование jQuery's .ready() Функция приходит в нескольких формах. Лично мне нравится вышеуказанный метод. Эти два ниже, кажется, наиболее официально потворствовали.

$(document).ready(function(){  console.log("DOM Ready!");  });

$(function(){  console.log("DOM Ready!");  });

Документация jQuery по .ready() имеет это сказать:

Хотя JavaScript предоставляет событие загрузки для выполнения кода при визуализации страницы, это событие не запускается, пока все ресурсы, такие как изображения, не будут получены полностью. В большинстве случаев скрипт может быть запущен, как только иерархия DOM будет полностью построена. Обработчик, переданный в.ready(), гарантированно будет выполнен после того, как DOM будет готов, поэтому обычно это лучшее место для присоединения всех других обработчиков событий и запуска другого кода jQuery. При использовании сценариев, которые полагаются на значение свойств стиля CSS, важно ссылаться на внешние таблицы стилей или вставлять элементы стиля, прежде чем ссылаться на сценарии.

Я выделил эту цитату из документации для вас, так как вы упомянули, что вы хотите, чтобы CSS загружался первым. Судя по всему, вам просто нужно убедиться, что ваш <link rel="stylesheet" href="style.css" /> теги размещены в <head> раздел над вашим кодом JQuery:)

Удачного кодирования! //Гнаться

http://jquery.com/