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

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

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

7
@ 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
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском