скрытый контейнер до полной загрузки не работает с кешированными изображениями

Question

У меня есть сайт с фоном и основным контейнером. Я хотел скрыть контейнер до загрузки всей страницы. поэтому я добавил

#cover{opacity:0}

в начале страницы и

$(window).load(function() { 
    $('#cover').css('opacity','1'); 
}); 

в конце, перед </body> тега. Он отлично работает, когда страница загружается в первый раз.

ПРОБЛЕМА: Если я загружаю одну и ту же страницу еще раз, она отображает все изображения и текст, разбросанные по всей странице. Он отлично работает после полной загрузки. конечно, этот тип поведения вызван кэшированными изображениями. но все изображения находятся внутри основного контейнера, который имеет opacity:0, это меня полностью смутило.

UPDATE 1:

Я использую turn.js преобразовать весь контейнер в книгу, я хочу, чтобы книга стала видна, когда книга готова т.е. как загрузка изображений и Javascript инициализация завершена.

UPDATE 2:

Это, как я проверка "изображений, загруженных" и "javascript инициализирован". он работал так, как я этого хотел. это хороший способ справиться с ситуацией?

$(window).load(function(){ 
    $(window).ready(function() { 
    $('#cover').css('opacity','1'); 
    }); 
}); 

$(window).ready(function(){ 
    $(window).load(function() { 
    $('#cover').css('opacity','1'); 
    }); 
}); 

Answer 1

Вы не называйте тот же блок в вашем CSS (#container) и в ваших JS (#cover).

Answer 2

Проблема может быть связана с $('window').onload();

Потратьте некоторое время и прочитать этот пост SO.

what-is-the-difference-between-window-load-and-document-ready

нагрузка вызывается, когда все активы загрузится, в том числе изображений. готов к работе, когда DOM готов к взаимодействию.

От MDC, window.onload:

нагрузка срабатывает событие в конце процесса загрузки документа. В этот пункт, все объекты в документе находятся в DOM, и все изображения и подкадры закончили загрузку.

Из документации JQuery API , .ready (обработчик):

Хотя JavaScript предоставляет событие загрузки для выполнения кода, когда страницы отображаются, это событие не получить срабатывает, пока все активы , такие как изображения были полностью получены. В большинстве случаев сценарий можно запустить, как только будет построена иерархия DOM полностью . Прошел обработчик.ready() гарантированно будет , выполненный после того, как DOM готов, поэтому это, как правило, лучшее место для , прикрепить все другие обработчики событий и запустить другой код jQuery. При использовании сценариев , которые полагаются на значение свойств стиля CSS, важно, чтобы ссылки на внешние таблицы стилей или элементы стиля встраивания составляли , ссылаясь на скрипты.

Дайте мне знать, если это изменение сработает.