Как разрешить выполнение javascript только тогда, когда dom и css готовы, но не изображение

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

Я знаю, как определить статус готовности dom, но как определить, что css готов?


javascript domready
person hh54188    schedule 28.12.2012    source источник
comment
Является ли модификация dom с помощью javascrpt для отображения вашего изображения после того, как вы выполнили стандартную обработку javascript?   -  person    schedule 28.12.2012
comment
@Kafuka: нет, я думаю, что мое изображение просто находится там, подождите отложенной загрузки. Не нужно использовать javascipt для изменения   -  person hh54188    schedule 28.12.2012

Ответы (7)


arrow_upward
1
arrow_downward

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

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

person janith    schedule 28.12.2012

arrow_upward
0
arrow_downward

У javascript нет возможности определить, загружены ли ваши файлы .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.");
});
person JustKash    schedule 28.12.2012
comment
Как я могу узнать, что файл css, который я динамически вставляю, имеет завершенную загрузку? - person hh54188; 28.12.2012
comment
Как только запустится функция dynamiclyLocadCss, ваш CSS должен быть загружен. Я также отредактирую функцию, чтобы иметь обратный вызов. - person JustKash; 28.12.2012

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

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

person Sam3k    schedule 07.01.2013

arrow_upward
0
arrow_downward

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

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

$(document).ready(function(){
    // now do your actions
});
person John Munro    schedule 15.01.2013

arrow_upward
0
arrow_downward

Люди здесь публикуют много примеров использования функции jQuery DOM ready, но они не упоминают или не демонстрируют что для его использования вам нужно включить jQuery.

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

В конце <head> вашего HTML-документа включите библиотеку 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 .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 :)

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

jQuery.com

person ChaseMoskal    schedule 04.02.2013

arrow_upward
0
arrow_downward

Если вы не можете использовать метод $(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>");
        }
    });
person Ricardus    schedule 10.02.2013