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

Question

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

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

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

7

добавлено 28 Декабрь 2012 в 05:19 автор hh54188

Просмотры: 4

источник

ro nl ja fr es de zh hi bn ar kk uz be tr uk

@ Kafuka: нет, я думаю, что мой образ - это просто позиция, подождите lazyload. Не используйте javascipt для изменения

добавлено 28 Декабрь 2012 в 05:30, автор hh54188, источник

Является ли изменение dom, используя javascrpt, чтобы показать ваше изображение после того, как вы выполнили стандартную обработку javascript?

добавлено 28 Декабрь 2012 в 05:22, автор user1877337, источник

7 ответы

Инструменты успешного делегирования

Автор: Евгений Попов

Супер After Effects 2

От команды Video-Smile

Супер Maya. Про

Автор курса Юрий Снытко

автор janith · Answer 1 · 2012-12-28T05:26Z

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

Source: window.onload vs $(document).ready()

1

добавлено 28 Декабрь 2012 в 05:26 автор janith

источник

автор Sam3k · Answer 2 · 2013-01-08T12:00Z

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

автор ChaseMoskal · Answer 3 · 2013-02-04T09:43Z

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

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

Within the end of your HTML document's <head>, include the jQuery library, and then your code :)

<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, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля перед ссылкой на сценарии.

I highlighted that quote from the docs for you, as you mentioned that you want the CSS to load first. By the looks of things, you just need to make sure that your <link rel="stylesheet" href="style.css" /> tags are placed in the <head> section above your jQuery code :)

Счастливое кодирование! //Гнаться

jQuery.com

автор Akash · Answer 4 · 2012-12-28T05:30Z

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.");
});

автор Ricardus · Answer 5 · 2013-02-11T01:09Z

Если вы не можете использовать технику $ (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("

");
        }
    });

автор DileepKumar · Answer 6 · 2013-01-06T07:01Z

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

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

автор John Munro · Answer 7 · 2013-01-15T11:23Z

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

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

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