Как отложить загрузку скрипта до полной загрузки страницы?

Question

[Cal_Lightman]

Здравствуйте.
Как сделать так, чтобы скрипт срабатывал только после полной загрузки страницы на 100% ?

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

function resizeScrenn(){
	if ($(window).innerWidth () >= 1025){

      $(window).scroll(function(){
      	if {
               // код
         }
         else if {
               // код
         }
      });

   } else{
   	
   }	

}
resizeScrenn();

$(window).resize(function(){
	resizeScrenn();
});

Я так понимаю нужно как то сделать что-то типа:

window.onload = function(){
    // script на jQuery
  }

Но что-то не выходит....

Comments

[Cal_Lightman]

molekulyarniy, Они все находятся в конце и загружаются асинхронно

[Сергей Сергей]

Раз уж всё так сложно со всплывашками, можно сделать следилку по таймеру за изменением высоты документа.

Answer 1

[Иван Кулаков]

Уберите вызов resizeScrenn(); сразу после обьявления, тогда оно будет срабатывать только при resize.
А если надо сразу после загрузки запустить прогон, то тупо:
window.onload = () => { resizeScrenn(); }

UPD: или:
window.onload = () => {
resizeScrenn();
window.onresize = () => { resizeScrenn(); };
}

Comments

[Cal_Lightman]

Когда разрешение менее 1024px, меню фиксировано сверху (на Мобильных) и скрипт не работает.
Но если вдруг экран перевернули и разрешение стало от 1025px и более то происходит прилипание меню кверху при прокрутке (на больших ПК экранах). И плюс элемент добавляется при фиксации вверху еще.

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

[Иван Кулаков]

Cal_Lightman, могу к вечеру набросать, сейчас, только спать ложусь, нужно вздремнуть, голова не работает))

[Cal_Lightman]

Хорошо.

Сейчас у меня вот такое:

// resizeScreen
function resizeScrenn(){
	if ($(window).innerWidth () >= 1025){

      // if scroll 150px
      $(window).scroll(function(){
      	if($(this).scrollTop() > 150 && $('.menu').hasClass('default')){
      		$('.menu').removeClass('default').addClass('fixed');
            // header_cart -> nav on
            $('.menu_cart_js').html($('.header_cart_js').html());
            $('.header_cart,.header_cart_content,.breadcrumb').toggleClass('active');
         }
         else if($(this).scrollTop() <= 150 && $('.menu').hasClass('fixed')){
         	$('.menu').removeClass("fixed").addClass('default');
            // header_cart -> nav off
            $('.header_cart,.header_cart_content,.breadcrumb').removeClass('active');
            $('.menu_cart_js').html('');
         }
      });

   } else{
   }	

}
resizeScrenn();
$(window).resize(function(){
	resizeScrenn();
});

[Иван Кулаков]

Cal_Lightman, дак Вам нужно что? Чтобы после загрузки страницы работало и не мерцало? Я ж выше описал как это сделать)
Код будет таким:

// resizeScreen
function resizeScrenn(){
  if ($(window).innerWidth () >= 1025){

      // if scroll 150px
      $(window).scroll(function(){
      	if($(this).scrollTop() > 150 && $('.menu').hasClass('default')){
      		$('.menu').removeClass('default').addClass('fixed');
            // header_cart -> nav on
            $('.menu_cart_js').html($('.header_cart_js').html());
            $('.header_cart,.header_cart_content,.breadcrumb').toggleClass('active');
         }
         else if($(this).scrollTop() <= 150 && $('.menu').hasClass('fixed')){
         	$('.menu').removeClass("fixed").addClass('default');
            // header_cart -> nav off
            $('.header_cart,.header_cart_content,.breadcrumb').removeClass('active');
            $('.menu_cart_js').html('');
         }
      });

   } else{
   }	

}
$(window).load(function(){
  resizeScrenn();
  $(window).resize(function(){
     resizeScrenn();
   });
  $(window).orientationchange(function(){
     resizeScrenn();
   });
});

[Cal_Lightman]

Да, чтоб не мерцало.
Не мерцает, но теперь сам скрипт не работает....
(меню не прилипает и так далее ничего не включается)

[Иван Кулаков]

Cal_Lightman, тогда, может, вот так:

$(document).ready(function(){
  resizeScrenn();
  $(window).resize(function(){
     resizeScrenn();
   });
  $(window).orientationchange(function(){
     resizeScrenn();
   });
});

[Cal_Lightman]

Иван Кулаков, так вроде не дергается.
И работают остальные скрипты тоже.
А что делает этот скрипт? Если объяснить словами по порядку?
Три подряд почти одно и тоже это нормально?

[Иван Кулаков]

Cal_Lightman,
1. $(document).ready() - срабатывает когда весь DOM загружен и готов
2. resizeScrenn(); вызываем функцию чтобы сразу стало все как надо
3. прокидываем ее в обработчик ресайза
4. прокидываем в обработчик смены ориентации (когда поворачивают экран)
Усё)

[Cal_Lightman]

Иван Кулаков, Спасибо.
А можно еще вопрос?
Вот у меня есть элементы на странице с transition:.3s;
Например навигация по Ховеру или по клику на бургере на малых разрешениях.
Так вот, когда в Браузере делаю переворот экрана, то все элементы тоже дергаются, но я так понимаю это уже не из-за скрипта а из-за этих transition:.3s;
Например меню бургера уезжает (это можно успеть увидеть за 1/3 сек. и так далее...
Этот баг как то можно убрать именно при перевороте?

[Иван Кулаков]

Cal_Lightman, странно, если транзишн нужен только по ховеру, то при ресайзе не должно дергаться, у вас что именно изменяется через транзишн? лучше не использовать all значение, верстка может плыть)

[Cal_Lightman]

Например:
1. Есть кнопка бургер. По клику на ней выезжает/скрывается нав.меню. (на мобильных)
Анимация выезда/скрытие меню задана так :
показ:

visibility:visible;
opacity:1;
transition: .3s;

скрытие:

visibility:hidden;
opacity:0;

3. На разрешениях для ПК есть всплывающее окно по Ховеру при наведении на иконку. Тоже задана так как выше.

Самое интересное, что Меню Бургера находится в media <=1024px, а окно с Ховером в media>1024px.

И если включить в браузере 768 х 1280px и менять оринтацию экрана то эти элементы анимируются и встают на место. Но анимацию и элементы видно!
Другие точно так же.

[Иван Кулаков]

Cal_Lightman, тогда не transition: .3s; надо, а transition: opacity .3s;

[Cal_Lightman]

Иван Кулаков, Если так пишу при выезде меню, то оно выезжает сразу, без 0.3 сек. Будто без анимации.

[Иван Кулаков]

Cal_Lightman, Вам надо узнать какие правила css отвечают за "выезд" меню и прописать их в транзишн помимо опасити

[Cal_Lightman]

Разобрался с transition: left .3s;
Спасибо !!!
У меня не получилось убрать дергание у двух элементов. Один из них всплывающее окно на ПК через ховер. При наведении на блок - всплытие. А на Мобильных - оно имеет фиксированные стили и выезжает по клику.
Дергается при переключении с Мобильного на ПК. Появляется Ховер отключения (исчезания) на ПК разрешениях.

.cart_popup - всплывающее окно (выезжающее на Мобильных)
.header_cart_content - блок (иконка)
.header_cart_content:hover>.cart_popup - при наведении или нажатии на нее....

@media (min-width:1025px){
/*cart_popup_pc*/
	.cart_popup{
		padding-top:15px;
		top:100%;
		right:-60px;
		position:absolute;
		visibility:hidden;
		opacity:0;
		transform:translate(0px, 20px);
		z-index:92;
	}
	.header_cart_content:hover>.cart_popup{
		visibility:visible;
		opacity:1;
		transform:translate(0px, 0px);
		transition:transform .3s,visibility .3s,opacity .3s;
		transition-delay:.1s;
	}
	.header_cart_content:not(:hover)>.cart_popup{
		transition:transform .2s,visibility .2s,opacity .2s;
	}
}

@media (max-width:1024px){
	/*cart_popup_mobile*/
	.cart_popup{
		background:#fff;
		padding:50px 0 0 0;
		height:100%;
		overflow-y:auto;
		overflow-x:hidden;
		z-index:96;
	}
	.cart_popup{
		width:320px;
		top:0;
		right:-320px;
		position:fixed;
		transition: .3s;
	}

	.cart_popup.active{
		right:0;
	}
}