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

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

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

7
добавлено
Просмотры: 1
источник
de
@ Kafuka: нет, я думаю, что мой образ - это просто позиция, подождите lazyload. Не используйте javascipt для изменения
добавлено автор hh54188, источник
Является ли изменение dom, используя javascrpt, чтобы показать ваше изображение после того, как вы выполнили стандартную обработку javascript?
добавлено автор user1877337, источник

7 ответы

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

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

1
добавлено
источник

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

0
добавлено
источник

Люди здесь публикуют много примеров использования функции 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

0
добавлено
источник

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

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

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

$(document).ready(
                 function(){
                            alert('DOM is now loaded and can be manipulated .');
                           }
                 );
0
добавлено
источник

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

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

$(document).ready(function(){
   //now do your actions
});
0
добавлено
источник