У меня есть сайт с фоном и основным контейнером. Я хотел скрыть контейнер, пока вся страница не будет загружена. поэтому я добавил
#cover{opacity:0}
В начале страницы и
$(window).load(function() {
$('#cover').css('opacity','1');
});
В конце, непосредственно перед тегом </body>. Он отлично работает, когда страница загружается в первый раз.
ПРОБЛЕМА: если я снова загружу ту же страницу, она покажет все изображения и текст, разбросанные по странице. После полной загрузки работает нормально. конечно, такое поведение вызвано кэшированными изображениями. но все изображения находятся внутри основного контейнера, в котором есть opacity:0, это меня полностью смутило.
ОБНОВЛЕНИЕ 1:
Я использую turn.js для преобразования всего контейнера в книгу, я хочу, чтобы книга стала видимой, когда книга будет готова, т.е. завершена загрузка изображений и инициализация javascript.
ОБНОВЛЕНИЕ 2:
Вот как я проверяю «изображения загружены» и «инициализированы javascript». он работал так, как я хотел. это хороший способ справиться с ситуацией?
$(window).load(function(){
$(window).ready(function() {
$('#cover').css('opacity','1');
});
});
$(window).ready(function(){
$(window).load(function() {
$('#cover').css('opacity','1');
});
});
2 ответа
Проблема может быть связана с вашим $('window').onload();
Потратьте некоторое время и прочитайте этот пост SO.
какая-есть-разница-между-загрузкой-окна-и-готовностью-документа
load вызывается, когда все активы загружаются, включая изображения. ready срабатывает, когда DOM готов к взаимодействию.
Из MDC, window.onload:
Событие загрузки запускается в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в модели DOM, а все изображения и субкадры завершили загрузку.
Из документации API jQuery, .ready(handler):
Хотя JavaScript предоставляет событие загрузки для выполнения кода при визуализации страницы, это событие не запускается, пока все ресурсы, такие как изображения, не будут полностью получены. В большинстве случаев скрипт можно запустить, как только иерархия DOM будет полностью построена. Обработчик, переданный в .ready (), гарантированно будет выполнен после того, как DOM будет готов, поэтому обычно это лучшее место для подключения всех других обработчиков событий и запуска другого кода jQuery. При использовании скриптов, которые полагаются на значение свойств стиля CSS, важно ссылаться на внешние таблицы стилей или встраивать элементы стиля, прежде чем ссылаться на скрипты.
Дайте мне знать, если это изменение работает.
Вы не вызываете один и тот же блок в своем CSS (#container) и в своем JS (#cover).
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.
javascript, так как это выглядит некрасиво.$('#cover').css('opacity','1');после этого?!javascriptзавершены.